fireEvent.change() does not work - it has undefined value on input change

Question

I'm getting undefined for event.target.value on an input change event triggered by fireEvent.change() in the code bellow:

import "@testing-library/jest-dom/extend-expect";
import React from "react";
import {
  fireEvent,
  render,
} from "@testing-library/react";

jest.mock('@material-ui/pickers', () => {
  const MockedMuiPickersUtilsProvider = ({ children }) => {
    return <div data-testid="mocked-mui-pickers-utils-provider">{children}</div>;
  };

  const MockedDatePicker = ({ onChange, value }) => {
    const handleDateChange = (event) => {
      const selectedDate = event.target.value;
      console.log('Selected Date: ', selectedDate);
      onChange(selectedDate);
    };
    
    return (
      <input
        value={value}
        type="date"
        onChange={handleDateChange}
        data-testid='my-datepicker-test-id'
      />
    );
  };
  return { MuiPickersUtilsProvider: MockedMuiPickersUtilsProvider, DatePicker: MockedDatePicker };
});

describe("Input date", () => {
  it('input value should be defined', async () => {
    const component = render(<MyComponent />);
    const inputDate = component.getByTestId('my-datepicker-test-id');
    const date = new Date('2023-07-18');

    fireEvent.change(inputDate, { target: { value: date } });

    expect(inputDate.value).toBe(date);
  });
});

Result:

FAIL

expect(received).toBe(expected)

Expected: 2023-08-18T00:00:00.000Z
Received: ""

Why fireEvent.change() would not reflect the value properly?

Answer 1

The issue was the value format, since the input is of type date the thetesting-library/react doc says that:

The 'value' attribute must use ISO 8601 format when firing a change event on an input of type 'date'. Otherwise the element will not reflect the changed value.

// Invalid:
fireEvent.change(input, {target: {value: '24/05/2020'}})

// Valid:
fireEvent.change(input, {target: {value: '2020-05-24'}})

So the test should be written the following way in order to work:

it('input value should be defined', async () => {
    const component = render(<MyComponent />);
    const inputDate = component.getByTestId('my-datepicker-test-id');
    const date = '2023-07-18';

    fireEvent.change(inputDate, { target: { value: date } });

    expect(inputDate.value).toBe(date);
});