Shallow Renderer - [ React中文开发手册 ] - 在线原生手册

目录搜索

Reference Reference: Component Reference: React Advanced Guides Quick Start DOM Elements Glossary of React Terms JavaScript Environment Requirements props React Top-Level API React.Component ReactDOM ReactDOMServer Shallow Renderer state SyntheticEvent Test Renderer Test Utilities Component React API Accessibility Context Error Boundaries Higher-Order Components Integrating with Other Libraries JSX In Depth Optimizing Performance Portals React Without ES6 React Without JSX Reconciliation Refs and the DOM Static Type Checking Typechecking With PropTypes Uncontrolled Components Web Components Components and Props Composition vs Inheritance Conditional Rendering Forms Handling Events Installation Introducing JSX Lifting State Up Lists and Keys Rendering Elements State and Lifecycle Thinking in React

文字

输入

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

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