How to make snapshot tests work

I’m using Jest for testing and I try to make snapshot tests of components rendering a DayPickerRangeController (although I guess this issue would be the same for other date pickers).

Say I want to make a snapshot test of a simple component wrapping DayPickerRangeController; used for setting nice defaults for instance, in my example numberOfMonths, startDateOffset and endDateOffset.

import React from "react";
import moment from "moment";
import PropTypes from "prop-types";
import momentPropTypes from "react-moment-proptypes";
import "react-dates/initialize";
import { START_DATE, END_DATE } from "react-dates/constants";
import { DayPickerRangeController } from "react-dates";

const DayPickerRangeControllerWrapper = ({
  startDate,
  endDate,
  focusedInput,
  onDatesChange,
  onFocusChange
}) => (
  <DayPickerRangeController
    startDate={startDate}
    endDate={endDate}
    onDatesChange={onDatesChange}
    focusedInput={focusedInput}
    onFocusChange={onFocusChange}
    numberOfMonths={1}
    startDateOffset={day => day.clone().add(1, "day")}
    endDateOffset={day => day.clone().subtract(1, "day")}
  />
);

DayPickerRangeControllerWrapper.propTypes = {
  startDate: momentPropTypes.momentObj,
  endDate: momentPropTypes.momentObj,
  focusedInput: PropTypes.oneOf([START_DATE, END_DATE]),
  onDatesChange: PropTypes.func.isRequired,
  onFocusChange: PropTypes.func.isRequired
};

DayPickerRangeControllerWrapper.defaultProps = {
  startDate: moment("2018-01-01"),
  endDate: moment("2018-01-07"),
  focusedInput: START_DATE
};

export default DayPickerRangeControllerWrapper;

I then try to snapshot test it

import React from "react";
import renderer from "react-test-renderer";
import DayPickerRangeControllerWrapper from "./DayPickerRangeControllerWrapper";

describe("DayPickerRangeControllerWrapper", () => {
  it("renders correctly", () => {
    const tree = renderer
      .create(
        <DayPickerRangeControllerWrapper
          onDatesChange={() => {}}
          onFocusChange={() => {}}
          onClearDates={() => {}}
        />
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

I get the following error

TypeError: Cannot read property '__consolidated_events_handlers__' of null

      at addEventListener (node_modules/consolidated-events/lib/index.js:22:14)
      at CalendarMonthGrid.componentDidMount (node_modules/react-dates/lib/components/CalendarMonthGrid.js:215:77)

This seems to be somehow related to https://github.com/airbnb/react-dates/issues/528, but I haven’t found a way to properly (and simply) mock ReactDOM or CalendarMonthGrid (that doesn’t seem like a good way to go though). I could always unit test my wrapper component, but I would like to be able to snapshot test it as well.

[nicolasrouanne]

I think I found the right way to do it. What I am really trying to test here is my DayPickerRangeControllerWrapper where I have some custom logic (pretty simple in my example); I don’t want to test react-dates’s DayPickerRangeController, as it’s not my concern.

So I need to mock DayPickerRangeController, which is a named export of the react-dates module (mock modules documentation by Jest).

react-dates mock

only mocking DayPickerRangeController since it’s the one I’m using

// ./__mocks__/react-dates.js
const DayPickerRangeController = ({ ...props }) =>
  `<DayPickerRangeController" ${JSON.stringify(props)}/>`;

export { DayPickerRangeController };

Snapshot

It works with the resulting snapshot

I chose to display props passed to my wrapper component in the snapshot, since I consider it’s part of my wrapper component’s contract to pass down the props to my wrapped component

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DayPickerRangeControllerWrapper renders correctly 1`] = `"<DayPickerRangeController\\" {\\"startDate\\":\\"2018-03-02T23:00:00.000Z\\",\\"endDate\\":\\"2018-01-06T23:00:00.000Z\\",\\"focusedInput\\":\\"startDate\\",\\"numberOfMonths\\":1}/>"`;

[shunfan]

@nicolasrouanne

You could mock out the DayPickerRangeController using Jest:

jest.mock('react-dates', () => ({
  DayPickerRangeController: 'mockDayPickerRangeController',
}));