fireEvent change event not fired for input with type date

[kormbrek-rally]

This is quite similar to testing-library/react-testing-library#532 and testing-library/react-testing-library#544. But different from those, it is happening with a present and valid value for the type attribute of the input element.

• @testing-library/react version: 9.4.0
• react version: 16.9.3
• node version: 8.17.0
• npm (or yarn) version: npm 6.13.4
• material-ui/core 3.9.2

Relevant code or config:

        <TextField
          type="date"
          value={this.state.date}
          onFocus={() => {console.log('FOCUS')}}
          onChange={() => {console.log('CHANGE')}}
          InputProps={{inputProps: {'data-testid': 'filter-date-input'}}}
        />

test.only('input date', async () => {
  const {getByTestId} = renderForTesting(<SomeComponent/>);
  const input = getByTestId('filter-date-input');
  console.log(`type: ` + input.getAttribute('type')); // prints type: date
  fireEvent.focus(input);
  fireEvent.change(input, { target: { value: '12/05/2020' } });
  // some code here waiting on result of onChange
});

What you did:

Trying to fire onChange of a component.

What happened:

BLUR is seen in the output (onBlur called).
CHANGE is not seen in the output (onChange not called).

If I change the type on TextField to "text", both events are fired.
However "date" is a valid type for inputs, and I can see that the input element material-ui creates has this from the log statement and some HTML from Chrome:

<input aria-invalid="false" class="MuiInputBase-input-198 MuiInput-input-183 MuiInputBase-inputType-201 MuiInput-inputType-186 MuiInputBase-inputMarginDense-199 MuiInput-inputMarginDense-184 MuiInputBase-inputAdornedStart-203" type="date" data-testid="filter-date-input" value="">

Reproduction:

Problem description:

Suggested solution:

[eps1lon]

Thanks for opening this issue and filling out the template.

Can you reduce this to a https://codesandbox.io/s/new without third-party libraries? Seems sufficient to use <input type="date" />

[kormbrek-rally]

here's a reproduction of the issue:
https://codesandbox.io/s/vigilant-jang-sudie?fontsize=14&hidenavigation=1&theme=dark

[eps1lon]

here's a reproduction of the issue:
codesandbox.io/s/vigilant-jang-sudie?fontsize=14&hidenavigation=1&theme=dark

Perfect, thanks.

This is a common pitfall (firing change event in general). You need to use a valid value. For date this means the string must be in a valid ISO 8601 format or in your case:

-fireEvent.change(input, { target: { value: '12/05/2020' } });
+fireEvent.change(input, { target: { value: '2020-05-12' } });

This is not equal to the value displayed to the user. That depends on their localization settings.

Leaving this open since we should add it to the docs.

[kormbrek-rally]

Thank you so much! User error/copypasta strikes again.
I have converted my test from Simulate to fireEvent and it is working great.
Also thank you for this project. It is a delight to use so far.

[eps1lon]

I have converted my test from Simulate to fireEvent and it is working great.

Yeah that's one of the reason why Simulate should be avoided. It let's you write test for scenarios that will never happen which results in a false sense of confidence.

[Smiter15]

This has been added to the docs here
https://testing-library.com/docs/dom-testing-library/api-events/#fireeventeventname

I think this issue can be closed.

[MatanBobi]

Amazing, thanks for pointing that out @Smiter15!

[yazeedb]

@eps1lon Thank you so much! This test is passing for me.

it("disables submit if startDate is in the past, and renders an error message", () => {
  const { getByLabelText, getByTestId, getByText } = render(<App />);

  userEvent.type(getByLabelText(formMetadata.startDate.label), "2000-01-01");

  getByText(errorMessages.cannotBePast);

  expect(getByTestId(formMetadata.submit.testId).hasAttribute("disabled")).toBe(
    true
  );
});