Jest - React 및 React Testing Library 테스트 API 요약
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 및 Jest 테스트를 수행하는 개발자 (중간 난이도)
핵심 요약
fireEvent
API를 사용하여 UI 이벤트를 시뮬레이션하고 콜백 검증waitFor
를 활용해 비동기 동작 대기 및 상태 변경 검증screen
객체로 DOM 쿼리 간편화 및 암묵적document.body
바인딩 제공querySelector()
와toBeInTheDocument()
매치러 사용하여 DOM 요소 검증
섹션별 세부 요약
1. 컴포넌트 렌더링 및 쿼리
render()
함수로 테스트 대상 컴포넌트 렌더링 후container.innerHTML
로 실제 HTML 확인querySelector()
로 CSS 선택자 기반 요소 검색 (예:.detail-meta__studio
)toBeInTheDocument()
로 요소 존재 여부 검증
2. 재렌더링 및 프롭스 업데이트
rerender()
API로 프롭스 변경 후 컴포넌트 재렌더링watermark
프롭스 추가 시querySelector('img')
로src
속성 검증toHaveAttribute()
로 이미지 URL 매칭
3. 이벤트 시뮬레이션
fireEvent.click()
으로 버튼 클릭 이벤트 시뮬레이션onClickItem
콜백이 정확히 1회 호출되었는지toHaveBeenCalledTimes(1)
로 검증- 주의사항: 테스트 대상 컴포넌트에
handleItemClick
콜백이 정확히 전달되어야 함
4. 비동기 상태 대기
waitFor()
로 로딩 상태 완료 후 버튼 존재 여부 검증 (예: 'Logout' 버튼)useEffect
내setTimeout
시뮬레이션 후user
상태 업데이트 검증
5. `screen` 객체 활용
screen.getByRole('heading', { level: 1 })
로 헤딩 요소 검색screen
객체는 모든 쿼리가document.body
에 자동 바인딩된 상태로 제공
결론
- 비동기 작업 시
waitFor()
사용, 이벤트 핸들러는fireEvent
와toBeInTheDocument()
조합으로 검증 screen
객체를 활용해 쿼리 코드 간결화,querySelector()
와toHaveAttribute()
로 세부 속성 검증- 테스트 전
renderResult
변수에 렌더링 결과 저장 후 재렌더링 및 상태 변경 시rerender()
활용