Jest 및 React Testing Library: 프론트엔드 테스트 최적화 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, 테스트 자동화 초보자 및 중급자
(난이도: 중간 수준 이상, Jest 및 React 기초 지식 필요)
핵심 요약
- 테스트 환경 구성:
jest
,@testing-library/react
,@testing-library/jest-dom
설치 및jest.config.js
설정 필수 - 테스트 전략:
render
,fireEvent
,screen
API 활용한 사용자 관점 테스트,getByRole
/getByText
등 요소 검색 강조 - 비동기/모킹 처리:
waitFor
,jest.useFakeTimers()
,jest.spyOn()
사용으로 효과적인 상태/이벤트 테스트 가능
섹션별 세부 요약
1. 설치 및 초기 설정
npm install
명령어로jest
,@testing-library/react
,@testing-library/jest-dom
설치jest.config.js
에서setupFilesAfterEnv
및testEnvironment: 'jsdom'
설정setupTests.js
파일을 통해 전역 모킹 및 설정 관리
2. 테스트 파일 작성
.test.js
/.test.tsx
확장자 사용, 컴포넌트 이름과 동일한 파일명으로 작성describe
/it
구조로 테스트 케이스 분리render
함수로 컴포넌트 렌더링,screen
객체로 DOM 요소 검색
3. 이벤트 및 상태 테스트
fireEvent
를 사용해 버튼 클릭, 입력 등 사용자 이벤트 시뮬레이션act
함수로useEffect
/useState
등 생명주기 메서드 테스트waitFor
/async/await
로 비동기 작업 완료 대기
4. 모킹 및 에러 테스트
jest-fetch-mock
으로 API 호출 모킹,fetch.mockResponseOnce()
사용- 에러 발생 시
fetchMock.mockRejectOnce()
로 테스트, 에러 메시지 검증 jest.spyOn()
으로 함수 호출 여부 및 인자 확인
5. 테스트 최적화 전략
--findRelatedTests
옵션으로 변경된 파일 관련 테스트만 실행jest-coverage
플러그인으로 코드 커버리지 보고서 생성snapshot
테스트로 빈번히 변경되지 않는 컴포넌트 렌더링 검증
결론
fireEvent
와screen
API를 활용한 사용자 관점 테스트가 핵심,waitFor
로 비동기 상태 처리 필수jest.useFakeTimers()
와act
함수로 타이머/이펙트 테스트 가능- CI/CD 통합 시
npx jest --coverage
명령어로 품질 관리,--findRelatedTests
로 테스트 속도 최적화