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() 来获取浅渲染的输出结果。

你可以开始断言输出结果的事实。


在 Github 上共同编辑:

Github 犀利文章: