samedi 23 juin 2018

Do a snapshot test of a component in React using Jest

I'm trying to do a snapshot test with jest, of a component called Month, but I received this error: Cannot read property 'addEventListener' of null and then The above error occurred in the <SelectableGroup> component: in SelectableGroup (created by Month) in div (created by Month) in Month

This is my test to do a snapshot:

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

And the render of the Month Component is:

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 group comes from import { SelectableGroup } from 'react-selectable-fast'; I think the problem is with SelectableGroup but I don't know how to make a snapshot of this component.The component itself can be found https://jsfiddle.net/7yg8jws6/

Thanks!

Aucun commentaire:

Enregistrer un commentaire