Как написать тест для компонента, который использует React.cloneElement?

Мой верхний компонент уровня принимает children из react-router так:Как написать тест для компонента, который использует React.cloneElement?

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?

источник

2017-01-05 Brandon

Возможный дубликат [Как проверить опору обновления на React компонент] (http://stackoverflow.com/questions/30614454/how-to- test-a-prop-update-on-react-component) – bman

Боюсь, что нет. Сообщение об ошибке, которое получал человек, содержало в нем термин «React.cloneElement». Мой вопрос заключается в том, как тестировать при использовании 'React.cloneElement'. – Brandon

Я думаю, что вы забыли передать реквизиты виджетов, это должно быть так: 'ReactDOM.render (, div)' –

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

источник

2017-01-05 07:56:17 jakee

Как написать тест для компонента, который использует React.cloneElement?

ответ

Смежные вопросы