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

Jest를 사용한 렌더링 출력에서 요소 존재 여부 검증 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 애플리케이션 테스트에 관심 있는 개발자 (중간 수준)

핵심 요약

  • queryBy... 메서드로 요소를 찾을 수 없을 경우 .not.toBeInTheDocument() 또는 .toBeNull() 사용
  • getBy... 메서드는 요소가 없을 경우 예외를 던지므로 .toThrow()로 검증 가능
  • 비동기 상태 업데이트 시 waitFor 또는 waitForElementToBeRemoved 사용 권장

섹션별 세부 요약

1. Query 메서드와 검증 방법

  • queryByTestId('user-profile-icon')null일 경우 .toBeNull()로 검증
  • getByText('Not Present')가 요소를 찾지 못하면 .toThrow()로 예외 발생 확인
  • querySelector().toBeInTheDocument() 조합으로 존재하지 않는 요소 검증 가능

2. 비동기 상태 업데이트 처리

  • 상태 업데이트, 리렌더링, 트랜지션, 외부 이벤트 등 비동기 처리 시 waitFor 사용
  • waitForElementToBeRemoved로 요소 제거가 완료되었는지 확인

3. 테스트 예시 및 패턴

  • screen.queryByTestId('user-profile-icon')로 요소 존재 여부 확인
  • expect(() => screen.getByText('Not Present')).toThrow()로 예외 발생 검증
  • querySelector('.main-header-sub-menu')로 CSS 선택자 기반 존재 여부 검증

결론

테스트에서 요소 존재 여부를 확인할 때는 .not.toBeInTheDocument() 또는 .toBeNull()을 사용하고, 비동기 상태 업데이트 시 waitFor를 활용하는 것이 권장됩니다. 예외 처리는 일반적인 존재 여부 검증에는 적합하지 않으므로 주의가 필요합니다.