Shallow Renderer

如何 Import

import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm

概觀

當在為 React 寫單元測試時,shallow render 十分有用。Shallow render 可以只 render 「第一層」的 component,並且對 component 的 render 方法的回傳值進行 assert,不必擔心 child component 的行為,child component 並沒有被實例化或被 render。Shallow render 不依賴 DOM。

例如,假設你有下列 component:

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

你可以使用 assert:

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" />
]);

Shallow testing 目前有些限制,並不支援 refs。

注意:

我們建議你可以查看 Enzyme 的 Shallow Rendering API。它在相同功能的基礎上提供更棒更高階的 API。

參考

shallowRenderer.render()

你可以把 shallowRenderer 想成一個用來 render 測試中 component 的「空間」,並且可以從中提取該 component 輸出的內容。

shallowRenderer.render() 類似於 ReactDOM.render(),但它不依賴 DOM 且只 render 一層。這意味著你可以對測試的 component 及其 child component 進行隔離測試。

shallowRenderer.getRenderOutput()

shallowRenderer.render() 被呼叫後,你可以使用 shallowRenderer.getRenderOutput() 來取得該 component 第一層的輸出內容。

然後,就可以對輸出的內容進行 assert 操作。