[아티클 프로젝트 018] react-testing-library 를 사용한 리액트 컴포넌트 테스트

react-testing-library 를 사용한 리액트 컴포넌트 테스트

react-testing-library

• Enzyme과 달리 모든 테스트를 DOM 위주로 진행
• 필요한 기능만 지원해서 가볍다
• 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있게 유도해준다.
• props, state 조회하는 작업을 하지 않음
• 리팩터링 시 구조, 네이밍 변경 시 기능이 똑같이 작동한다면 테스트가 실패하지 않음

 

1. CRA 프로젝트 생성
2. react-testing-library, jest-dom 설치
   1. jest-dom은 jest 확장, dom관련 matcher를 추가해준다.
   2. vscode 사용 시 @types/jest 도 같이 설치
3. 테스트 코드 작성
4. 테스팅

 

스냅샷 테스팅

ㄴ 렌더링결과와 이전 렌더링 결과의 일치여부(u 키로 업데이트)

 

쿼리함수

ㄴ react-testing-library 기반 dom-testing-library에서 지원하느 함수들

ㄴ Variant, Queries의 조합으로 네이밍이 이루어짐

 

---

 

react-testing-library 를 사용한 리액트 컴포넌트 테스트

https://velog.io/@velopert/react-testing-library