如何为使用 React.cloneElement 的组件编写测试？答案

【问题标题】：How do I write a test for a component that uses React.cloneElement?如何为使用 React.cloneElement 的组件编写测试？
【发布时间】：2017-05-19 12:13:57
【问题描述】：

我的顶级组件从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 的调用的方式测试组件？

【问题讨论】：

How to test a prop update on React component的可能重复
不怕。该人收到的错误消息中包含术语React.cloneElement。我的问题涉及到使用React.cloneElement时如何测试。
我想你忘了传递小部件道具，应该是这样的：ReactDOM.render(<App widgets={some value} />, div)

标签： javascript reactjs jestjs

【解决方案1】：

您的问题是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)
})

【讨论】：