Shallow Renderer

输入

import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
var 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()获取浅显示的输出。

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