TypeError : 효소와 모카로 정의되지 않은 반응 테스트의 속성 'map'을 읽을 수 없습니다.

Question

테스트를 실행하면 오류가 다시 발생합니다 : TypeError: Cannot read property 'map' of undefined.

Jest, 효소 및 모카를 사용하여 구성 요소에 대한 구성 요소 테스트를 작성하고 있습니다. 그런 다음이

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

: 그래서 아래

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;

구성 요소에 대한 코드의

` 는 다음 아래의 테스트 내 구성 요소 '이다 내가 ru 일 때 던져지는 오류입니다. N이 : 이해가 안

● <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을하고,하지만 소품에서 렌더링하고 있습니다.

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

을 아니면 상태에서 렌더링을 의미하는 경우 당신은 또한 그것을 초기 상태에 기본을 제공한다 :

당신은 소품에서 렌더링 할 경우에 당신은 defaultProps에 그것을 디폴트 값을 제공한다 .