[아티클 프로젝트 017] Enzyme를 사용하여 리액트 컴포넌트 테스트

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 이벤트 시뮬레이트

 

---

 

리액트 테스트의 소개

https://velog.io/@velopert/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%9D%98-%EC%86%8C%EA%B0%9C

 

Enzyme를 사용하여 리액트 컴포넌트 테스트

https://velog.io/@velopert/react-testing-with-enzyme