酶的浅层渲染会产生道具错误

Question

When I try to perform a basic shallow rendering test with the shallow function, I get the following error message:

TypeError: Cannot read property 'props' of undefined

at Object.ReactElement.cloneElement (node_modules/react/lib/ReactElement.js:271:34)
at Object.ReactElementValidator.cloneElement (node_modules/react/lib/ReactElementValidator.js:242:48)
at App.render (src/App.js:117:57)
at node_modules/react-dom/lib/ReactCompositeComponent.js:796:21
at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
at ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext (node_modules/react-dom/lib/ReactCompositeComponent.js:795:25)
at ReactCompositeComponent.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:362:30)
at ReactCompositeComponent.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.ReactReconciler.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactShallowRenderer._render (node_modules/react-dom/lib/ReactShallowRenderer.js:132:23)
at _batchedRender (node_modules/react-dom/lib/ReactShallowRenderer.js:85:12)
at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:60:14)
at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
at ReactShallowRenderer.render (node_modules/react-dom/lib/ReactShallowRenderer.js:112:18)
at ReactShallowRenderer.render (node_modules/enzyme/build/react-compat.js:180:39)
at node_modules/enzyme/build/ShallowWrapper.js:128:26
at ReactDefaultBatchingStrategyTransaction.TransactionImpl.perform (node_modules/react-dom/lib/Transaction.js:140:20)
at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
at batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
at performBatchedUpdates (node_modules/enzyme/build/ShallowWrapper.js:106:42)
at node_modules/enzyme/build/ShallowWrapper.js:127:9
at withSetStateAllowed (node_modules/enzyme/build/Utils.js:284:3)
at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:126:38)
at shallow (node_modules/enzyme/build/shallow.js:19:10)
at Object.it (src/App.test.js:12:67)
at process._tickCallback (internal/process/next_tick.js:103:7)

The render method of the App component is as follows:

render() {
    const id = this.props.selectedPane;

    let child = React.cloneElement(this.props.children, {
        appLogin: this.appLogin,
        appLogout: this.appLogout,
        createModal: this.createModal,
        closeModal: this.closeModal,
        togglePackagePublish: this.togglePackagePublish,
        editPackage: this.editPackage,
        removePackage: this.removePackage,
    });

    const backgroundStyle = (this.props.panes[id] || {}).style;

    return (
        <div className="App">
            <div className="App-backgroundColor"></div>
            <div className="App-backgroundImage" style={backgroundStyle}></div>

            <Header
                panes={this.props.panes}
                selectedPane={this.props.selectedPane}
                navBarItemClick={this.navBarItemClick} />

            {child}

            <Footer />

            <div className={"Modal-container" + (this.props.modal ? "" : " hidden")}>
                {this.props.modal}
            </div>
        </div>
    );
}

The test looks like so:

// react
import React from 'react';

// enzyme
import { shallow, } from 'enzyme';

// component
import { App, } from './App';

describe('app unit tests', () => {
    it('renders App', () => {
        const app = shallow(<App />);
        expect(wrapper).to.have.length(1);
    });
});

Answer 1

You should assign to this.props.children that meaningful React.Node value for React.cloneElement. And you should use "mount" for access to Children.