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
?
This document uses PHP Chinese website manual Release
characters
輸入
import ShallowRenderer from 'react-test-renderer/shallow';
// ES6var ShallowRenderer = require('react-test-renderer/shallow');
// ES5 with npm概觀
在為React編寫單元測試時，淺層渲染可能會有所幫助。淺層渲染使您可以渲染“一層深度”的組件，并確定其渲染方法返回的事實(shí)，而不必?fù)?dān)心未實(shí)例化或渲染的子組件的行為。這不需要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視為渲染正在測試的組件的“地點(diǎn)”，并從中提取組件的輸出。
shallowRenderer.render()是類似的，ReactDOM.render()但它不需要DOM，只能渲染一個深度。這意味著您可以測試與孩子實(shí)施方式相關(guān)的組件。
shallowRenderer.getRenderOutput()
在shallowRenderer.render()調(diào)用之后，可以使用shallowRenderer.getRenderOutput()獲取淺顯示的輸出。
然后你可以開始斷言輸出結(jié)果。