React Testing Library: Unable to Change Material UI DatePicker Input Value

Question

I'm trying to change the value of the Material UI Datepicker Input with React Testing Library. But it doesn't seem to work with fireEvent.change().

import React from "react";
import { render, screen, waitFor, fireEvent } from "@testing-library/react";

import MomentUtils from "@date-io/moment";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

describe("DatePicker", () => {
    test("Change datepicker value", async () => {
        render(
            <MuiPickersUtilsProvider utils={MomentUtils}>
                <DatePicker
                    label="Start Date"
                    id="startDate"
                    onChange={(date) => {
                        return undefined;
                    }}
                    value={new Date()}
                    format={"yyyy/MM/DD"}
                />
            </MuiPickersUtilsProvider>
        );

        const startDateInput = (await screen.findByLabelText("Start Date")) as HTMLInputElement;
        screen.debug(startDateInput);
        fireEvent.change(startDateInput, { target: { value: "2021/01/01" } });
        expect(startDateInput.value).toBe("2021/01/01");
    });

Here is what jest reports:

console.log
    <input
      aria-invalid="false"
      class="MuiInputBase-input MuiInput-input"
      id="startDate"
      readonly=""
      type="text"
      value="2021/08/01"
    />

expect(received).toBe(expected) // Object.is equality

    Expected: "2021/01/01"
    Received: "2021/08/27"

Any suggestions are appreciated :)

Aestivate

This works for me. The only difference in my code is im using <LocalizationProvider dateAdapter={AdapterMoment}> <DatePicker label="Start Date" id="startDate" onChange={(date) => { return undefined; }} value={new Date()} format={"yyyy/MM/DD"} /> </LocalizationProvider> instead see docs here: mui.com/x/react-date-pickers/date-picker – Sarong

Answer 1

DatePicker by default will open the calendar view and will not allow you to provide keyboard inputs . You need to use the KeyboardDatePicker instead .

import React, { useState } from "react";
import { render, screen, fireEvent } from "@testing-library/react";

import DateFnsUtils from "@date-io/date-fns";
import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

const DatePickerExample = () => {
  const [date, setDate] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        clearable
        label="Start Date"
        id="startDate"
        onChange={(date) => {
          setDate(date);
        }}
        value={date}
        format={"yyyy/MM/dd"}
      />
    </MuiPickersUtilsProvider>
  );
};

describe("DatePicker", () => {
  test("Change datepicker value", () => {
    render(<DatePickerExample />);

    const startDateInput = screen.getByLabelText("Start Date");
    fireEvent.change(startDateInput, { target: { value: "2021/01/01" } });
    expect(startDateInput.value).toBe("2021/01/01");
  });
});

Oof

Answer 2

I had a similar problem and solved it this way:

const datepicker = screen.getByLabelText('To date')
userEvent.type(datepicker, '2021-11-09'); // type anything 
const chosenDate = screen.getByRole('button', { name: "Oct 30, 2019"}); // choose any date that the calender shows
fireEvent.click(chosenDate);
expect(chosenDate).toBeInTheDocument();

Collencollenchyma

Answer 3

The above answer worked for me, with a little modification though.

 const dayOfVisit = container.getByRole('textbox', { name: 'Choose date, selected date is Sep 7, 2021' })
 fireEvent.click(dayOfVisit);
 const dayInput = container.getByRole('button', { name: 'Sep 9, 2021'});
 fireEvent.click(dayInput);
 expect(dayInput).toBeInTheDocument();

Bidle