AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

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' 버튼)
  • useEffectsetTimeout 시뮬레이션 후 user 상태 업데이트 검증

5. `screen` 객체 활용

  • screen.getByRole('heading', { level: 1 })로 헤딩 요소 검색
  • screen 객체는 모든 쿼리가 document.body에 자동 바인딩된 상태로 제공

결론

  • 비동기 작업 시 waitFor() 사용, 이벤트 핸들러는 fireEventtoBeInTheDocument() 조합으로 검증
  • screen 객체를 활용해 쿼리 코드 간결화, querySelector()toHaveAttribute()로 세부 속성 검증
  • 테스트 전 renderResult 변수에 렌더링 결과 저장 후 재렌더링 및 상태 변경 시 rerender() 활용