Question

当我尝试使用浅函数执行基本的浅渲染测试时，我收到以下错误消息：

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)

App组件的render方法如下：

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>
    );
}

测试看起来像这样：

// 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

您应该将有意义的React.Node值分配给this.props.children。并且您应该使用“ mount”访问儿童。

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

1 个答案: