Why enzyme? & enzyme shallow vs mount

[boxfox619]

• 테스트 도구로 enzyme를 사용해야 하는 이유를 탐구
• enzyme의 shallow와 mount의 차이점을 탐구

[boxfox619]

Shallow

진정한 단위 테스트 (격리된, 자식 렌더링 X)

Simple Shallow

Calls:

• constructor
• render

Shallow + setProps

Calls:

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render

Shallow + unmount

Calls:

• componentWillUnmount

Mount

• componentDidMount와 componentDidUpdate 라이프사이클을 테스트하기 위한 유일한 방법.
• 자식컴포넌트를 포함하여 전체 렌더링.
• DOM(jsdom, domino)이 필수로 요구됨
• 실행시간이 더 소요됨

  JSDOM 이전에 React 가 포함된 경우 일부 트릭이 필요하다 require('fbjs/lib/ExecutionEnvironment').canUseDOM = true;

Simple mount

Calls:

• constructor
• render
• componentDidMount

Mount + setProps

Calls:

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

Mount + unmount

Calls:

• componentWillUnmount

Render

오직 render 함수만 호출하며 모든 자식까지 렌더링한다.

Shallow vs Mount vs Render

• 항상 shallow를 기본으로 사용
• 컴포넌트의 라이프사이클 및 하위 동작을 테스트하려면 mount를 사용
• 자식 컴포넌트를 렌더링 하고 라이프사이클 메소드를 테스트할 필요가 없으며 mount보다 적은 오버헤드를 가지고 테스트하려면 render를 사용

Enzyme V3 부터는 shallow도 componentDidMount, componentDidUpdate라이프사이클을 호출함 https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md

참고자료 : https://gist.github.com/fokusferit/e4558d384e4e9cab95d04e5f35d4f913

[boxfox619]

Why enzyme?

• 매우 빠름
• 스냅샷 테스트
• 변경 사항에 관련된 테스트만 재실행하는 인터렉티브(interactive)한 감시 모드
• 유용한 실패(fail) 메세지
• 간단한 설정
• 목(Mocks)과 스파이(spies)
• 단일 커맨드 라인을 이용한 커버리지 리포트 https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f

[boxfox619]

https://medium.com/codeclan/testing-react-with-jest-and-enzyme-20505fec4675