当我运行测试时，会抛出错误：TypeError: Cannot read property 'map' of undefined。
我正在使用Jest，酶和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)
答案 0 :(得分：0)
我不明白的一件事 - 您在setState中为groupMessage做了onStoreChange，但后来从道具中进行渲染。
如果你想从道具中渲染它，你应该在defaultProps中给它一个默认值：
class MessageBoard extends React.Component {
static defaultProps = {
groupMessage: []
}
或者如果你想从状态渲染它，那么你也应该在初始状态下给它一个默认值。