Jest와 Enzyme으로 React 테스트하기

gincheong commented 3 years ago

create-react-app으로 react 프로젝트를 생성하면 jest는 기본으로 깔려 있음

npm install enzyme enzyme-adapter-react-16

adapter는 react 버전 맞추어 설치하면 됨 링크

그리고 src/ 의 setupTests.js에 아래 내용 추가하기

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

gincheong commented 3 years ago

Enzyme의 shallow 함수로 unit 테스트를 할 수 있음

jest의 render는 child component까지 모조리 렌더링하는데 shallow는 child 제외하고 현재 컴포넌트만 렌더링함

gincheong commented 3 years ago

Functional Component에서 mount를 사용해야만 redux store에 접근 가능한데? 이 mount가 react 17버전에서 아직 작동이 안 되어서 16.14.0 버전으로 낮추고 했음..

gincheong commented 3 years ago

mount().state() 는 Class Component에서만 사용할 수 있어서,
Hook을 사용하는 Functional Component는 state 값을 직접 확인하는 방법이 불가능하다.

이렇게 state에 직접 접근하여 값을 확인하는 방식을 Testing Implementation Details 이라고 하나보다

번역기에 넣으면 "구현 세부 사항 테스트" 라는데, 아무튼 이런 방식을 지양하고

실제 컴포넌트가 변화되는 것을 확인하는 방식을 사용하라고 한다.

이를테면, state가 변한 것으로 테스트의 성공 여부를 판단하지 말고, 변한 state가 올바르게 적용되는지를 보라는 것

결과적으로 Functional Component에서 State에 직접 접근하는 방법은 없다는 건 맞지만, 애당초 테스트 방향성을 달리 잡으면 state에 직접 접근할 필요가 없다는 것

gincheong / Memo