얕은 렌더러

불러오기

import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
var ShallowRenderer = require('react-test-renderer/shallow'); // npm에서 ES5를 사용하는 경우

개요

React를 위한 유닛 테스트를 작성할 때 얕은 렌더링이 유용할 수 있습니다. 얕은 렌더링은 컴포넌트를 “한 단계 깊이”로 렌더링할 수 있으며 인스턴스화 또는 렌더링 되지 않는 자식 컴포넌트의 동작에 대해 걱정 없이 렌더링 메서드가 무엇을 반환하는지에 대해 검증할 수 있습니다. 이 작업은 DOM이 필요하지 않습니다.

예를 들어 다음 컴포넌트가 있는 경우

function MyComponent() {
  return (
    <div>
      <span className="heading">Title</span>
      <Subcomponent foo="bar" />
    </div>
  );
}

다음과 같이 검증할 수 있습니다.

import ShallowRenderer from 'react-test-renderer/shallow';

// in your test:
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);
const result = renderer.getRenderOutput();

expect(result.type).toBe('div');
expect(result.props.children).toEqual([
  <span className="heading">Title</span>,
  <Subcomponent foo="bar" />
]);

얕은 테스팅은 현재 몇 가지 제한 사항이 있습니다. 다시 말해 refs를 지원하지 않습니다.

주의

우리는 또한 Enzyme의 Shallow Rendering API를 확인해 볼 것을 권장합니다. 같은 기능에 대해 더 높은 수준의 API를 제공합니다.

참조

shallowRenderer.render()

shallowRenderer는 테스트 중인 컴포넌트를 렌더링하는 “장소(place)“로 생각할 수 있으며 이것으로부터 컴포넌트의 출력을 추출할 수 있습니다.

shallowRenderer.render()는 root.render()와 비슷하지만 DOM을 요구하지 않으며 오직 한 단계 깊이만을 렌더링합니다. 이것은 컴포넌트의 자식들이 어떻게 구현되었는지 신경 쓰지 않고 독립적으로 테스트할 수 있음을 의미합니다.

shallowRenderer.getRenderOutput()

shallowRenderer.render()가 호출된 후 shallowRenderer.getRenderOutput()을 사용하여 얕게 렌더링 된 출력을 얻을 수 있습니다.

그러면 출력에 대해 검증을 시작할 수 있습니다.