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
©
本文檔使用 php中文網手册 發布
文字
输入
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()获取浅显示的输出。
然后你可以开始断言输出结果。