Как написать тестовый блок с использованием jest для componentDidmount и componentetdidupdate?

Question

Я новичок в модульном тестировании, используя шутку для компонента реакции.Как написать модульный тест для жизненных циклов компонентов.Я пытался, но это не сработало.Я имею в виду, что на самом деле это не покрывается полной составляющей.когда я пытаюсь использовать npm run test, он показывает ошибки в ожидаемой строке id proptype.Пожалуйста помоги мне с этим.

My component:

    import $ from 'jquery';
    import React from 'react';
    import { Scrollbars } from 'react-custom-scrollbars';
    import WatsonMessageBox from './watsonmessagebox';
    import StudentMessageBox from './studentmessagebox';
    import ErrorMessageBox from './errormessagebox';

    class Chatlist extends React.Component {
      componentDidMount() {
        document.getElementsByClassName('scrollDM')[0].firstChild.tabIndex = -1;
      }
      componentDidUpdate() {
        const node = $('.scrollDM').children().last();
        node.css('border-radius', '6px');
        node.css('width', '11px');
        node.children(0).css('background-color', '#c4c4c4');
        // eslint-disable-next-line
        const { scrollbars } = this.refs;
        if (this.props.updateComponent) {
          scrollbars.scrollToBottom();
        }
      }

      render() {
        // // console.log('chatlist props== ', this.props);
        return (<Scrollbars
        // eslint-disable-next-line
          ref={'scrollbars'} className="scrollDM msg-blck chat-block"
        >
          <div className="alignBottom body-height">
            {
            this.props.messages.map((arg, index) => {
              let isLOEO = false;
              switch (arg.senderId) {
                case 'watson':
                case 'ack':
                  if (arg.chatLabel && (typeof arg.chatLabel === 'object')) {
                    isLOEO = arg.chatLabel.type === 'QUESTION';
                  } else {
                    isLOEO = false;
                  }
                  return (<WatsonMessageBox
                    id={index} message={arg.chatText} isLOEO={isLOEO}
                    label={arg.chatLabel} index={index + 10}
                    showBar={this.props.messages.length - 1 > index}
                  />);
                case 'err':
                  return <ErrorMessageBox id={index} message={arg.chatText} index={index + 10} />;
                case 'student':
                default:
                  return (<StudentMessageBox
                    id={index} key={index} isError={arg.isRetry}
                    retryAction={this.props.retryAction} retryMessage={this.props.retryMessage}
                    message={arg.chatText} label={arg.chatLabel} index={index + 10}
                  />);
              }
            })
          }
          </div>
        </Scrollbars>
        );
      }

    }

    Chatlist.propTypes = {
      updateComponent: React.PropTypes.bool,
      messages: React.PropTypes.array,
      retryMessage: React.PropTypes.string,
      retryAction: React.PropTypes.function
    };

    Chatlist.defaultProps = {
      messages: []
    };
    export default Chatlist;

My unit test using jest looks like as: 
    import React from 'react';
import Chatlist from '../components/dialogManager/chatlist';
import WatsonMessageBox from '../components/dialogManager/watsonmessagebox';
import ErrorMessageBox from '../components/dialogManager/errormessagebox';
import StudentMessageBox from '../components/dialogManager/studentmessagebox';
import { shallow, mount } from 'enzyme';
import renderer from 'react-test-renderer';

describe('Chatlist', () => {
  let component;
  const mockFn = jest.fn();
  const mockOutputObj = [{
    type: 'DEFAULT',
    text: 'Research that relies on statistical analysis of numerical or categorical data.  I hope that helps.'
  }, {
    type: 'DEFAULT',
    text: 'Let\'s go back to my question:'
  }, {
    type: 'QUESTION',
    text: 'What is the relationship between dependent and independent variables?'
  }, {
    type: 'MENU_ITEM',
    text: 'what is quantitative research?',
    return_value: 'what is quantitative research?'
  }, {
    type: 'MENU_ITEM',
    text: 'what is mixed method research?',
    return_value: 'what is mixed method research?'
  }, {
    type: 'MENU_ITEM',
    text: 'what is qualitative research?',
    return_value: 'what is qualitative research?'
  }, {
    type: 'MENU_ITEM',
    text: 'I had a different question',
    return_value: 'I had a different question'
  }, {
    type: 'MENU_ITEM',
    text: 'That was actually my answer',
    return_value: 'That was actually my answer'
  }];
  const mockMessages = [{
    senderId: 'watson',
    chatLabel: {
      message: 'What conclusions can you draw about the physical changes and health concerns that occur during middle adulthood?',
      type: 'QUESTION'
    },
    Feedback: 'Feedback',
    autoConnectingMsg: 'Connection lost. Reconnecting',
    btnDone: 'Close',
    btnSubmit: 'Send',
    charRemaining: 'characters remaining',
    close: 'close',
    loading: 'Loading ...',
    longMsgError: 'Your message is too long.',
    manualConnectingMsg: 'Reconnecting',
    reconnectFailedMessage: 'Unable to reconnect. Please try again later.  ',
    retryButton: 'Retry',
    retryMessage: 'Message not sent. Click to retry.',
    textboxPlaceholder: 'Type a message...',
    unSupportedChar: 'Your message contains unsupported characters.',
    retryAction: mockFn
  }];

  const mockStudentMessages = [{
    senderId: 'student',
    outputObj: mockOutputObj,
    Feedback: 'Feedback',
    autoConnectingMsg: 'Connection lost. Reconnecting',
    btnDone: 'Close',
    btnSubmit: 'Send',
    charRemaining: 'characters remaining',
    close: 'close',
    loading: 'Loading ...',
    longMsgError: 'Your message is too long.',
    manualConnectingMsg: 'Reconnecting',
    reconnectFailedMessage: 'Unable to reconnect. Please try again later.  ',
    retryButton: 'Retry',
    retryMessage: 'Message not sent. Click to retry.',
    textboxPlaceholder: 'Type a message...',
    unSupportedChar: 'Your message contains unsupported characters.'
  }];

  const mockAckMessages = [{
    senderId: 'ack',
    outputObj: mockOutputObj,
    Feedback: 'Feedback',
    autoConnectingMsg: 'Connection lost. Reconnecting',
    btnDone: 'Close',
    btnSubmit: 'Send',
    charRemaining: 'characters remaining',
    close: 'close',
    loading: 'Loading ...',
    longMsgError: 'Your message is too long.',
    manualConnectingMsg: 'Reconnecting',
    reconnectFailedMessage: 'Unable to reconnect. Please try again later.  ',
    retryButton: 'Retry',
    retryMessage: 'Message not sent. Click to retry.',
    textboxPlaceholder: 'Type a message...',
    unSupportedChar: 'Your message contains unsupported characters.'
  }];

  const mockErrMessages = [{
    senderId: 'err',
    outputObj: mockOutputObj,
    Feedback: 'Feedback',
    autoConnectingMsg: 'Connection lost. Reconnecting',
    btnDone: 'Close',
    btnSubmit: 'Send',
    charRemaining: 'characters remaining',
    close: 'close',
    loading: 'Loading ...',
    longMsgError: 'Your message is too long.',
    manualConnectingMsg: 'Reconnecting',
    reconnectFailedMessage: 'Unable to reconnect. Please try again later.  ',
    retryButton: 'Retry',
    retryMessage: 'Message not sent. Click to retry.',
    textboxPlaceholder: 'Type a message...',
    unSupportedChar: 'Your message contains unsupported characters.'
  }];
  let spy;
  // afterEach(() => {
  //   spy.mockClear();
  // });
  // test('Should initialize the chatlist content', () => {
  //   // console.log('Chatlist component content== ', component);
  //   const tree = component.toJSON();
  //   // console.log('Chatlist tree== ', tree);
  //   expect(tree).toMatchSnapshot();
  // });
  test('Should render a chatlist messages', () => {
    component = shallow(<Chatlist
      messages={mockMessages}
      retryAction={mockFn}
      retryMessage={mockMessages.retryMessage}
      updateComponent={false}
    />);
    // // console.log('Chatlist component scrolldm child == ', component.find('.scrollDM').children().last());
    // // console.log('Chatlist component scrolldm [0].firstChild.tabIndex == ', component.find('.scrollDM').find('div').instance().props);
    // // console.log('Chatlist component instance== ', component.instance());
    // // console.log('Chatlist component== ', component.instance().props.messages.outputObj);
    expect(component.instance().props.messages).toEqual(mockMessages);
    expect(component.instance().props.retryAction).toEqual(mockFn);
    expect(component.instance().props.retryMessage).toEqual(mockMessages.retryMessage);
    expect(component.find('.scrollDM')).toHaveLength(1);
    expect(component.instance().props.updateComponent).toBeFalse();
    // expect(component.find('.scrollDM').prop('style')).to.deep.equal({ borderRadius: '6px' });
  });

  test('Should check a chatlist before mount', () => {
    component = shallow(<Chatlist
      messages={mockMessages}
      retryAction={mockFn}
      retryMessage={mockMessages.retryMessage}
      updateComponent={false}
    />);
    // console.log('Chatlist component prototype == ', component.prototype);
    spy = jest.spyOn(component.prototype, 'componentDidMount');
    const wrapper = mount(<Chatlist />);
    wrapper.instance().componentDidMount();
    expect(spy).toHaveBeenCalled();
    // expect(component.find('.scrollDM').prop('style')).to.deep.equal({ borderRadius: '6px' });
  });

  test('Should check the senderId be watson in chatlist component', () => {
    component = shallow(<Chatlist
      messages={mockMessages}
      retryAction={mockFn}
      retryMessage={mockMessages.retryMessage}
      updateComponent={false}
    />);
    component.instance().props.messages.map((arg, index) => {
      [
      { senderId: 'watson', components: <WatsonMessageBox id={`${index} 1`} /> },
      { senderId: 'ack', components: <WatsonMessageBox /> },
      { senderId: 'err', components: <ErrorMessageBox id={`${index} 1`} message={arg.chatText} /> },
      { senderId: 'student', components: <StudentMessageBox /> }
      ].forEach(({ senderId, components }) => {
        // console.log('Chatlist final senderId 1== ', senderId);
        // console.log('Chatlist final arg.senderId 1 == ', arg.senderId);
        // console.log('Chatlist components1 == ', components);
      // const result = Chatlist(id);
      // // console.log('Chatlist final == ', id);
        expect(arg.senderId).toBe('watson');
      });
      return arg.senderId;
    });
  });
  test('Should check the senderId be student in chatlist component', () => {
    component = shallow(<Chatlist
      messages={mockStudentMessages}
      retryAction={mockFn}
      retryMessage={mockStudentMessages.retryMessage}
      updateComponent={false}
    />);
    component.instance().props.messages.map((arg, index) => {
      [
      { senderId: 'watson', components: <WatsonMessageBox id={`${index} 1`} /> },
      { senderId: 'ack', components: <WatsonMessageBox /> },
      { senderId: 'err', components: <ErrorMessageBox id={`${index} 1`} message={arg.chatText} /> },
      { senderId: 'student', components: <StudentMessageBox /> }
      ].forEach(({ senderId, components }) => {
        // console.log('Chatlist final senderId 2 == ', senderId);
        // console.log('Chatlist final arg.senderId 2 == ', arg.senderId);
        // console.log('Chatlist components == ', components);
      // const result = Chatlist(id);
      // // console.log('Chatlist final == ', id);
        expect(arg.senderId).toBe('student');
      });
      return arg.senderId;
    });
  });
  test('Should check the senderId be ack in chatlist component', () => {
    component = shallow(<Chatlist
      messages={mockAckMessages}
      retryAction={mockFn}
      retryMessage={mockMessages.retryMessage}
      updateComponent={false}
    />);
    component.instance().props.messages.map((arg, index) => {
      [
      { senderId: 'watson', components: <WatsonMessageBox id={`${index} 1`} /> },
      { senderId: 'ack', components: <WatsonMessageBox /> },
      { senderId: 'err', components: <ErrorMessageBox id={`${index} 1`} message={arg.chatText} index={index + 10} /> },
      { senderId: 'student', components: <StudentMessageBox /> }
      ].forEach(({ senderId, components }) => {
        // console.log('Chatlist final arg.senderId 3 == ', arg.senderId);
        // console.log('Chatlist final id 3 == ', senderId);
        // console.log('Chatlist components == ', components);
      // const result = Chatlist(id);
      // // console.log('Chatlist final == ', id);
        expect(arg.senderId).toBe('ack');
      });
      return arg.senderId;
    });
  });

  test('Should check the senderId be err in chatlist component', () => {
    component = shallow(<Chatlist
      messages={mockErrMessages}
      retryAction={mockFn}
      retryMessage={mockMessages.retryMessage}
      updateComponent={false}
    />);
    component.instance().props.messages.map((arg, index) => {
      [
      { senderId: 'watson', components: <WatsonMessageBox id={`${index} 1`} /> },
      { senderId: 'ack', components: <WatsonMessageBox /> },
      { senderId: 'err', components: <ErrorMessageBox id={`${index} 1`} message={arg.chatText} index={index + 10} /> },
      { senderId: 'student', components: <StudentMessageBox /> }
      ].forEach(({ senderId, components }) => {
        // console.log('Chatlist final arg.senderId 3 == ', arg.senderId);
        // console.log('Chatlist final id 3 == ', senderId);
        // console.log('Chatlist components == ', components);
      // const result = Chatlist(id);
      // // console.log('Chatlist final == ', id);
        expect(arg.senderId).toBe('err');
      });
      return arg.senderId;
    });
  });

  test('Should check the chat Type in chatlist component', () => {
    component = shallow(<Chatlist
      messages={mockMessages}
      retryAction={mockFn}
      retryMessage={mockMessages.retryMessage}
      updateComponent={false}
    />);
    component.instance().props.messages.map((arg, index) => {
      [
      { senderId: 'watson', components: <WatsonMessageBox id={`${index} 1`} /> },
      { senderId: 'ack', components: <WatsonMessageBox /> },
      { senderId: 'err', components: <ErrorMessageBox id={`${index} 1`} message={arg.chatText} index={index + 10} /> },
      { senderId: 'student', components: <StudentMessageBox /> }
      ].forEach(({ senderId, components }) => {
        // console.log('Chatlist final senderId 4== ', senderId);
        // console.log('Chatlist final arg.senderId 4 == ', arg.senderId);
        // console.log('Chatlist components 4 == ', components);
      // const result = Chatlist(id);
      // // console.log('Chatlist final == ', id);
        expect(typeof arg.chatLabel).toBe('object');
        expect(arg.chatLabel.type).toBe('QUESTION');
      });
      return arg.senderId;
    });
  });
});

Если что-то не так, исправьте это.это полезно для меня.