输入

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

概观

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

浅测试目前有一些限制，即不支持参考。

注意：我们也推荐检查酶的浅显示API。它通过相同的功能提供更好的更高级别的API。

参考

shallowRenderer.render()

您可以将shallowRenderer视为渲染正在测试的组件的“地点”，并从中提取组件的输出。

shallowRenderer.render()是类似的，ReactDOM.render()但它不需要DOM，只能渲染一个深度。这意味着您可以测试与孩子实施方式相关的组件。

shallowRenderer.getRenderOutput()

在shallowRenderer.render()调用之后，可以使用shallowRenderer.getRenderOutput()获取浅显示的输出。

然后你可以开始断言输出结果。