아티클
[아티클 프로젝트 018] react-testing-library 를 사용한 리액트 컴포넌트 테스트
주섬이
2020. 8. 4. 22:48
반응형
react-testing-library 를 사용한 리액트 컴포넌트 테스트
react-testing-library
- Enzyme과 달리 모든 테스트를 DOM 위주로 진행
- 필요한 기능만 지원해서 가볍다
- 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있게 유도해준다.
- props, state 조회하는 작업을 하지 않음
- 리팩터링 시 구조, 네이밍 변경 시 기능이 똑같이 작동한다면 테스트가 실패하지 않음
- CRA 프로젝트 생성
- react-testing-library, jest-dom 설치
- jest-dom은 jest 확장, dom관련 matcher를 추가해준다.
- vscode 사용 시 @types/jest 도 같이 설치
- 테스트 코드 작성
- 테스팅
스냅샷 테스팅
ㄴ 렌더링결과와 이전 렌더링 결과의 일치여부(u 키로 업데이트)
쿼리함수
ㄴ react-testing-library 기반 dom-testing-library에서 지원하느 함수들
ㄴ Variant, Queries의 조합으로 네이밍이 이루어짐
react-testing-library 를 사용한 리액트 컴포넌트 테스트
반응형