テキスト

输入

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()获取浅显示的输出。

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

前の記事: 次の記事: