[英]How to get text element of the given react component in React.cloneElement?
[英]How do I write a test for a component that uses React.cloneElement?
我的頂級組件像這樣從react-router
帶走children
:
class App extends Component {
render() {
return (
<div>
{React.cloneElement(children, this.props.widgets)}
</div>
)
}
}
我正在嘗試使用jest
編寫一個簡單的測試,如下所示:
it('renders without crashing', () => {
const div = document.createElement('div')
ReactDOM.render(<App />, div)
})
但是,此測試失敗,並出現以下錯誤:
FAIL src/App.test.js
● renders without crashing
TypeError: Cannot read property 'props' of undefined
at Object.<anonymous>.ReactElement.cloneElement (node_modules/react/lib/ReactElement.js:271:34)
at Object.cloneElement (node_modules/react/lib/ReactElementValidator.js:216:48)
at App.render (src/App.js:50:57)
at node_modules/react-dom/lib/ReactCompositeComponent.js:796:21
at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (node_modules/react-dom/lib/ReactCompositeComponent.js:795:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:822:32)
at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:362:30)
at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
at mountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:104:32)
at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
有沒有辦法模擬cloneElement
? 還是以一種忽略對cloneElement
的調用的方式測試組件?
你的問題是, children
是不確定的,因為沒有路由器提供一個子組件。
通過創建測試子組件來修復它:
class TestComponent extends Component {
render() { return (<div className="test" />) }
}
it('renders without crashing', () => {
const div = document.createElement('div')
ReactDOM.render(<App><TestComponent /></App>, div)
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.