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!