Simulate onChange for material-ui/pickers with jest and enzyme

Viewed 1398

I'm trying to test my date picker from Material-ui/pickers but I can't find the right way to do it.

Currently the only test that is not working is when I simulate change to the input. Can anyone please tell me what is wrong with this?

Test:

import React from "react";
import renderer from "react-test-renderer";
import dayjs from "dayjs";
import { mount } from "enzyme";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import DayJsUtils from "@date-io/dayjs";
import DateRangeFilter from "../DateRangeFilter";

const start = dayjs("2020-01-01").format();
const end = dayjs("2020-01-30").format();

const handleStartDate = jest.fn();
const handleEndDate = jest.fn();

const props = {
  startDate: start,
  endDate: end,
  handleStartDate,
  handleEndDate,
};

describe("Renders", () => {
  let component;

  beforeEach(() => {
  ┊ component = renderer.create(
  ┊ ┊ <MuiPickersUtilsProvider utils={DayJsUtils}>
  ┊ ┊ ┊ <DateRangeFilter {...props} />
  ┊ ┊ </MuiPickersUtilsProvider>
  ┊ );
  });

  it("Renders the same", () => {
  ┊ const wrapper = component.toJSON();

  ┊ expect(wrapper).toMatchSnapshot();
  });

  const wrapper = mount(
  ┊ <MuiPickersUtilsProvider utils={DayJsUtils}>
  ┊ ┊ <DateRangeFilter {...props} />
  ┊ </MuiPickersUtilsProvider>
  );
  it("Changes parent date", () => {
  ┊ wrapper
  ┊ ┊ .find("input")
  ┊ ┊ .first()
  ┊ ┊ .simulate("change", {
  ┊ ┊ ┊ target: { value: dayjs("2020-01-01").format("YYYY-MM-DD") },
  ┊ ┊ });

  ┊ expect(handleStartDate).toHaveBeenCalledWith("2020-01-01");
  });

  it("Checks datepicker pop up open", () => {
  ┊ const wrapper = mount(
  ┊ ┊ <MuiPickersUtilsProvider utils={DayJsUtils}>
  ┊ ┊ ┊ <DateRangeFilter {...props} />
  ┊ ┊ </MuiPickersUtilsProvider>
  ┊ );
  ┊ wrapper.find("input[type='text']").first().simulate("click");
  ┊ expect(wrapper.find(".MuiPickersBasePicker-container")).toHaveLength(1);
  });

  it("Renders DatePicker", () => {
  ┊ expect(wrapper.find(DatePicker)).toHaveLength(2);
  });
});

Component:

import React from "react";
import dayjs from "dayjs";
import { DatePicker } from "@material-ui/pickers";
import PropTypes from "prop-types";

function DateRangeFilter({
  startDate,
  handleStartDate,
  endDate,
  handleEndDate,
}) {
  return (
  ┊ <div className="ml-8 p-8 border-1 w-1/2">
  ┊ ┊ <div className="flex flex-row">
  ┊ ┊ ┊ <p className="text-lg font-semibold">Filter Using:</p>
  ┊ ┊ </div>
  ┊ ┊ <div className="flex flex-row -mx-4">
  ┊ ┊ ┊ <div className="px-8">
  ┊ ┊ ┊ ┊ <DatePicker
  ┊ ┊ ┊ ┊ ┊ format="YYYY-MM-DD"
  ┊ ┊ ┊ ┊ ┊ label="Minimum Date"
  ┊ ┊ ┊ ┊ ┊ inputVariant="outlined"
  ┊ ┊ ┊ ┊ ┊ minDate={new Date("2015-01-01")}
  ┊ ┊ ┊ ┊ ┊ maxDate={dayjs().format()}
  ┊ ┊ ┊ ┊ ┊ value={startDate}
  ┊ ┊ ┊ ┊ ┊ onChange={handleStartDate}
  ┊ ┊ ┊ ┊ />
  ┊ ┊ ┊ </div>
  ┊ ┊ ┊ <div className="px-8">
  ┊ ┊ ┊ ┊ <DatePicker
  ┊ ┊ ┊ ┊ ┊ format="YYYY-MM-DD"
  ┊ ┊ ┊ ┊ ┊ label="Maximum Date"
  ┊ ┊ ┊ ┊ ┊ inputVariant="outlined"
  ┊ ┊ ┊ ┊ ┊ minDate={startDate}
  ┊ ┊ ┊ ┊ ┊ maxDate={dayjs().format()}
  ┊ ┊ ┊ ┊ ┊ value={endDate}
  ┊ ┊ ┊ ┊ ┊ onChange={handleEndDate}
  ┊ ┊ ┊ ┊ />
  ┊ ┊ ┊ </div>
  ┊ ┊ </div>
  ┊ </div>
  );
}

DateRangeFilter.propTypes = {
  endDate: PropTypes.string,
  startDate: PropTypes.string,
  handleEndDate: PropTypes.func,
  handleStartDate: PropTypes.func,
};

export default DateRangeFilter;

The only one that does not pass is Changes parent date

Error code:

 FAIL  src/app/components/filters/__tests__/dateRangeTest.js
  Renders
    ✓ Renders the same (21ms)
    ✕ Changes parent date (22ms)
    ✓ Checks datepicker pop up open (204ms)
    ✓ Renders DatePicker (20ms)

  ● Renders › Changes parent date

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "2020-01-01"

    Number of calls: 0

      48 |       .simulate("change", {
      49 |         target: { value: dayjs("2020-01-01").format("YYYY-MM-DD") },
    > 50 |       });
         |                    ^
      51 |
      52 |     expect(handleStartDate).toHaveBeenCalledWith("2020-01-01");
      53 |   });

      at Object.<anonymous> (src/app/components/filters/__tests__/dateRangeTest.js:50:29)

I can't find anything in the documentation for testing. I suspect that onChange does not put the handle change in the input?

Please help.. Thanks!

0 Answers
Related