javascript - 类型错误 : Cannot read property 'map' of undefined react test with enzyme and mocha

Question

当我运行测试时，会抛出错误:TypeError:无法读取未定义的属性“map”。

我正在使用 Jest、enzyme 和 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

有一件事我不明白 - 您正在 onStoreChange 中为 groupMessage 执行 setState，但然后从 props 渲染它。

如果你想从 props 渲染它，你应该在 defaultProps 中给它一个默认值:

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

或者，如果您打算从状态渲染它，那么您还应该在初始状态下为其指定默认值。