Shallow Render
导入依赖:
import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm
概览:
在为 React 编写单元测试时,浅渲染可能会有帮助。浅渲染使你可以渲染“一级深度”的组件,并确定 render 方法返回的内容,而不用担心未实例化或未渲染的子组件的行为。这不需要请求 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" />
]);
浅测试目前有一些限制,即不支持 refs。
注意: 我们还建议检查 Enzyme’s 的 浅渲染 API。它在相同的功能上提供了更好的更高级别的 API。
文档参考
shallowRenderer.render()
你可以将 shallowRenderer 视为渲染正在测试的组件的 “地点”,并从中提取组件的输出内容。
shallowRenderer.render()
类似于 ReactDOM.render(),但是它不需要 DOM,只能渲染一个等级深度。这意味着你可以测试与他们的子组件实施方式相关的组件。
shallowRenderer.getRenderOutput()
在调用了 shallowRenderer.render()
之后,可以使用 shallowRenderer.getRenderOutput()
来获取浅渲染的输出结果。
你可以开始断言输出结果的事实。