Enzyme를 사용하여 리액트 컴포넌트 테스트
테스트 소개
가장 기본적인 방법은 내부 유틸 함수인 react-dom/test-utils 사용한다.
하지만 복잡하고 불편한 점이 있기 때문에 리액트 공식문서에서도 테스팅 라이브러리 사용을 권장한다.
react-testing-library를 권장하며 Enzyme를 대체하여 사용할 수 있다고 언급한다.
두 라이브러리는 서로 다른 철학을 가지고 있다.
Enzyme
- 컴포넌트 내부 기능 집중
- post나 state 확인
- 컴포넌트 내장 메서드를 직접 호출
react-testing-library
- 렌더링 결과에 집중
- 컴포넌트 인스턴스에 신경쓰지 않고 화면에 보여지는 것
- 이벤트 발생 시 화면의 변화에 대한 부분에 최적화
- 사용자 관점에서 테스팅하기 용이하다.
Enzyme
1. IDE의 지원을 제대로 받기위해 jest 설치
- CRA로 만든 프로젝트는 jest가 이미 설치되어 있으나 아닌 경우에는 @types/jest를 통해 설치
2. enzyme enzyme-adapter-react-16 라이브러리 설치
- 스냅샷 테스팅은 enzyme-to-json 라이브러리 추가 설치
3. package.json에 jest 설정
- 필요하다면!
4. 테스트 코드 작성
테스트 목록
- 스냅샷 테스팅
- props 접근
- DOM 확인
- 클래스형 컴포넌트의 테스팅
- DOM 이벤트 시뮬레이트
리액트 테스트의 소개
Enzyme를 사용하여 리액트 컴포넌트 테스트