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
를 활용하는 것이 권장됩니다. 예외 처리는 일반적인 존재 여부 검증에는 적합하지 않으므로 주의가 필요합니다.