Как написать тест для компонента, использующего React.cloneElement?

Мой компонент верхнего уровня берет children из react-router вот так:

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?


reactjs javascript jestjs
person Brandon    schedule 05.01.2017    source источник
comment
Возможный дубликат Как протестировать обновление реквизита в компоненте React   -  person bman    schedule 05.01.2017
comment
Не боюсь. Сообщение об ошибке, которое получил человек, содержало термин React.cloneElement. Мой вопрос касается того, как проверить при использовании React.cloneElement.   -  person Brandon    schedule 05.01.2017
comment
я думаю, вы забыли передать реквизиты виджетов, это должно быть так: ReactDOM.render(<App widgets={some value} />, div)   -  person Mayank Shukla    schedule 05.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

Ваша проблема в том, что 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)
})
person jakee    schedule 05.01.2017