react-shallow-renderer

在写出单位测试反应时,浅渲染可以有所帮助. 浅析的渲染可以使一个组件“一个深层” 并断言其渲染方法返回的事实,而不担心儿童组件的行为,这些组件不是即时的,也不是渲染出来的。 这不需要一个DOM.

安装

# npm
npm install react-shallow-renderer --save-dev

# Yarn
yarn add react-shallow-renderer --dev

使用量

例如,如果组件如下:

function MyComponent() {
  return (
    <div>
      <span className="heading">Title</span>
      <Subcomponent foo="bar" />
    </div>
  );
}

那你可以断言:

import ShallowRenderer from 'react-shallow-renderer';
// 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" />,
]);

浅色测试目前有一些局限性,即不支持参考.

说明:

我们还建议检查Enzyme的 浅色渲染 API。它为同一功能提供了更优等的API.

参考文献

shallowRenderer.render()

可以将浅色渲染器想成"地"来使所测试的组件,从中可以提取组件的输出.

shallowRenderer.render() 类似 ReactDOM.render() 但它并不需要DOM 并且只使一个单层深。 这意味着你可以测试与他们的孩子如何被执行分离的组件.

shallowRenderer.getRenderOutput()

之后 shallowRenderer.render() 已调用,您可以使用 shallowRenderer.getRenderOutput() 以获得浅析输出.

然后,你可以开始断言 有关输出的事实.