TypeError：無法讀取未定義的酶和摩卡反應測試的屬性“ map”

Question

當我運行測試時，會拋出一個錯誤： TypeError: Cannot read property 'map' of undefined 。

我正在使用Jest，Ease和Mocha為我的組件編寫組件測試。 所以下面是我的組件

 import React from 'react'; import AppActions from '../actions/AppActions'; import MessageForm from '../components/MessageForm.jsx'; /** * * @class MessageBoard * * @extends {React.Component} */ class MessageBoard extends React.Component { /** * @description Creates an instance of MessageBoard * * @memberof MessageBoard */ constructor() { super(); this.state = { message: '', groupId: '', }; } /** * @description this receives props from the parent component * * @param {any} nextProps * * @memberof MessageBoard */ componentWillReceiveProps(nextProps) { this.setState({ groupId: nextProps.groupId, }); } /** * @description gets the message from the store * @memberof MessageBoard */ onStoreChange = () => { this.setState({ groupMessage: AppStore.getAllMessages(), }); } /** * @param {any} event * * @memberof MessageBoard */ handlePriority=(event)=> { this.setState({ priority: event.target.value }); } /** * @param {any} event * * @memberof MessageBoard */ onChange=(event)=> { this.setState({ message: event.target.value }); } /** * @param {any} event * * @memberof MessageBoard */ onSubmit=(event)=> { event.preventDefault(); const { text, type } = this.refs; const messageDetail = { message: this.state.message, priority: this.refs.type.value, }; const groupId = this.state.groupId; if (groupId !== '') { AppActions.postMessage(messageDetail, groupId); text.value = ''; type.value = 'Normal'; } } /** * @memberof MessageBoard * * @returns {any} This returns the rendered component */ render() { const messageList = this.props.groupMessage.map( (groupMessage, index) => <div key={index} className="row"> <div className="col-sm-12"> <div className="well"> <p id="message-text">{groupMessage.message}</p> <time id="time-tag">{groupMessage.time}</time> </div> </div> </div> ); return ( <div> <MessageForm groupname={this.props.groupname} messageList={messageList} /> <div id='message' className='container-fluid'> <form id="messageboard" onSubmit={this.onSubmit}> <div className='row content'> <div id="message-box" className="form-group"> <textarea className="form-control" ref="text" rows="0.5" onChange={this.onChange} placeholder='type a message..' required> </textarea> </div> <button type="submit" className="btn btn-success"> Submit </button> <select ref="type" style={{ color: 'black', float: 'left' }} className="select_btn"> <option value='Normal'>Normal</option> <option value='Urgent'>Urgent</option> <option value='Critical'>Critical</option> </select> </div> </form> </div> </div> ); } } export default MessageBoard; 

`這是組件的代碼，然后是測試：

 import React from 'react'; import { mount, shallow } from 'enzyme'; import expect from 'chai'; import MessageBoard from '../src/components/MessageBoard.jsx'; import MessageForm from '../src/components/MessageForm.jsx'; describe('<MessageBoard/>', () => { it('should contain <MessageForm/> component', ()=> { const wrapper = shallow(<MessageBoard/>); expect(wrapper.find(MessageForm)).to.have.length(1); }); it('should contain props for messageform', ()=> { const wrapper = shallow(<MessageBoard/>); expect(wrapper.props().groupname).to.be.defined; }); it('should have a form ', ()=> { const wrapper = shallow(<MessageBoard/>); expect(wrapper.find('form')).to.have.length(1); }) it('should have a textarea for message input', ()=> { const wrapper = shallow(<MessageBoard/>); expect(wrapper.find('textarea')).to.have.length(1); }); it('should have a button', ()=> { const wrapper = shallow(<MessageBoard/>); expect(wrapper.find('button')).to.have.length(1); }); it('should have a select ', ()=> { const wrapper = shallow(<MessageBoard/>); expect(wrapper.find('select')).to.have.length(1); }); it('should have a option ', ()=> { const wrapper = shallow(<MessageBoard/>); expect(wrapper.find('option')).to.have.length(3); }); it('should have anempty initial state', ()=> { const wrapper = shallow(<MessageBoard/>); expect(wrapper.state().message).to.equal(''); expect(wrapper.state().groupId).to.equal(''); }) }); 

這就是我運行它時拋出的錯誤：

 ● <MessageBoard/> › should have an empty initial state TypeError: Cannot read property 'map' of undefined at MessageBoard.render (client/src/components/MessageBoard.jsx:109:607) at node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:793:21 at measureLifeCyclePerf (node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:73:12) at ShallowComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:792:25) at ShallowComponentWrapper.performInitialMount (node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:359:30) at ShallowComponentWrapper.mountComponent (node_modules/react-test-renderer/lib/shallow/ReactCompositeComponent.js:255:21) at Object.mountComponent (node_modules/react-test-renderer/lib/shallow/ReactReconciler.js:43:35) at ReactShallowRenderer._render (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:136:23) at _batchedRender (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:83:12) at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactDefaultBatchingStrategy.js:58:14) at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactUpdates.js:95:27) at ReactShallowRenderer.render (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:110:18) at ReactShallowRenderer.render (node_modules/enzyme/build/react-compat.js:171:37) at node_modules/enzyme/build/ShallowWrapper.js:128:26 at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/shallow/Transaction.js:141:20) at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactDefaultBatchingStrategy.js:60:26) at Object.batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactUpdates.js:95:27) at ReactShallowRenderer.unstable_batchedUpdates (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:128:25) at performBatchedUpdates (node_modules/enzyme/build/ShallowWrapper.js:103:21) 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.<anonymous> (client/__test__/MessageBoard.spec.js:38:39) at Promise.resolve.then.el (node_modules/p-map/index.js:46:16) 

Answer 1

有一件事我不明白-你正在做setState為groupMessage在onStoreChange ，但隨后從道具渲染它。

如果要通過道具渲染它，則應在defaultProps為其提供默認值：

class MessageBoard extends React.Component {
  static defaultProps = {
    groupMessage: []
  }

或者，如果您打算從狀態渲染它，那么還應該在初始狀態為其提供默認值。