使用Jest对React中的组件进行快照测试

时间:2018-06-23 17:58:40

标签: javascript reactjs testing jestjs snapshot

我正在尝试对名为Month的组件进行一次快照测试,但是我收到了以下错误:Cannot read property 'addEventListener' of null然后是The above error occurred in the <SelectableGroup> component: in SelectableGroup (created by Month) in div (created by Month) in Month

这是我做快照的测试:

import React from 'react';
import renderer from 'react-test-renderer';

import Month from '../../../components/Calendar/Month';

jest.mock('../../../components/Calendar/Cell', () => '<MockedCell />');

const props = {
  visibleMonth: 1,
  events: {},
  onSelect: jest.fn(),
};

describe('<Cell />', () => {
  describe('Displays a cell per day in the calendar view', () => {
    it('renders the component with the information of every day', () => {
      const component = renderer.create(<Month {...props} />);
      expect(component).toMatchSnapshot();
    });
  });
});

月份组件的呈现方式是:

render() {
    return (
      <div styleName="calendar">
        <SelectableGroup
          className=""
          resetOnStart
          allowClickWithoutSelected
          ignoreList={['.not-selectable']}
          duringSelection={this.duringSelection}
          onSelectionFinish={this.onSelectionFinish}
        >
          <table styleName="table">
            {this.renderDayHeaderCells()}
            {this.renderMonth()}
          </table>
        </SelectableGroup>
      </div>
    );
  }

Selectable组来自import { SelectableGroup } from 'react-selectable-fast';,我认为问题出在SelectableGroup上,但我不知道如何制作此组件的快照。可以找到组件https://jsfiddle.net/7yg8jws6/

谢谢!

0 个答案:

没有答案