boxfox619/CC-Show-New

Why enzyme? & enzyme shallow vs mount

Opened this issue · 3 comments

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

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 commented

Why enzyme?