此文章是翻译Shallow Renderer这篇React（版本v16.2.0）官方文档。

Shallow Renderer

Importing

  1. import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
  2. const ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm

概览

当为React 写单元测试时, 浅渲染会变得十分有用。浅渲染使你渲染组件的“第一层”，并且对组件的 render 方法的返回值进行断言，不用担心子组件的行为，组件并没有实例化或被渲染。浅渲染并不需要 DOM。

例如，如果你有如下的组件：

  1. function MyComponent() {
  2.   return (
  3.     <div>
  4.       <span className="heading">Title</span>
  5.       <Subcomponent foo="bar" />
  6.     </div>
  7.   );
  8. }

然后你可以断言：

  1. import ShallowRenderer from 'react-test-renderer/shallow';
  3. // in your test:
  4. const renderer = new ShallowRenderer();
  5. renderer.render(<MyComponent />);
  6. const result = renderer.getRenderOutput();
  8. expect(result.type).toBe('div')
  9. expect(result.props.children).toEqual([
  10.   <span className="heading">Title</span>,
  11.   <Subcomponent foo="bar" />
  12. ]);

浅测试当前游戏以讹限制，换句话说就是不支持refs。

注意： 我们还建议看看Enzyme 的Shallow Rendering API。它在相同的功能上提供了一个更棒的高级 API。

参考

shallowRenderer.render()

你可以把shallowRenderer 想象成一个用来渲染你正在测试的组件的“地方”，并且你可以从那里取到该组件的输出。

shallowRenderer.render() 和ReactDOM.render()很像。但是它不需要DOM 并且只渲染一层。这就意味着你可以测试组件，不管它们的子组件是怎么实现的。

shallowRenderer.getRenderOutput()

在shallowRenderer.render() 调用之后，你可以使用shallowRenderer.getRenderOutput() 得到浅渲染的输出。

然后你就可以对输出进行断言了。