[v5] Can't fire change events on DatePicker using testing-library/react

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Using fireEvent.change or userEvent.type to simulate changes doesn’t trigger the onChange event. The value never changes. But when testing the component manually in the browser it works fine.

Expected Behavior 🤔

DatePicker value should change when using fireEvent.change or userEvent.type in tests

Steps to Reproduce 🕹

https://codesandbox.io/s/failing-datepicker-tests-6y1c8

Steps:

1. Add jest and testing-library/react using latest MUI V5
2. Write a test that triggers onChange on DatePicker

Context 🔦

We are migrating from V4 to V5, and I’m at the end of updating all tests. We have our own form handler which uses material-ui for it’s input components. While migrating, we want to make sure the components work as before, but right now we can’t test that the components actually work at all.

There is a chance I’ve missed something, but I feel like I’ve tested everything I can think of and can’t come to any other conclusion that there’s a bug somewhere.

Your Environment 🌎

`npx @material-ui/envinfo`

 System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 7.19.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.124
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.59)
  npmPackages:
    @emotion/react: ^11.4.0 => 11.4.0
    @emotion/styled: ^11.3.0 => 11.3.0
    @material-ui/core: ^5.0.0-alpha.38 => 5.0.0-alpha.38
    @material-ui/icons: ^5.0.0-alpha.37 => 5.0.0-alpha.37
    @material-ui/lab: ^5.0.0-alpha.38 => 5.0.0-alpha.38
    @material-ui/private-theming:  5.0.0-alpha.36
    @material-ui/styled-engine:  5.0.0-alpha.34
    @material-ui/styles: ^5.0.0-alpha.36 => 5.0.0-alpha.36
    @material-ui/system:  5.0.0-alpha.38
    @material-ui/types:  6.0.1
    @material-ui/unstyled:  5.0.0-alpha.38
    @material-ui/utils:  5.0.0-alpha.36
    @types/react: ^17.0.3 => 17.0.11
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.2.3 => 4.3.4

[Matt-Tranzact]

This works for me in order to fire input change event:

jest.mock('@mui/lab/DateTimePicker', () => { return jest.requireActual('@mui/lab/DesktopDateTimePicker') })

It will just overwrite the default DateTimePicker behavior as a DesktopDateTimePicker which can fire the input change event.

[Matt-Tranzact]

This works for me in order to fire input change event:

jest.mock('@mui/lab/DateTimePicker', () => { return jest.requireActual('@mui/lab/DesktopDateTimePicker') })

It will just overwrite the default DateTimePicker behavior as a DesktopDateTimePicker which can fire the input change event.

Now that DatePicker lib comes from ‘@mui/x-date-pickers/DateTimePicker’, there is a workaround to make this work again:

Assuming you are using DateTimePicker with: import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'

In your test file, you can mock it with:

jest.mock('@mui/x-date-pickers/DateTimePicker', () => {
  return {
    DateTimePicker: jest.requireActual(
      '@mui/x-date-pickers/DesktopDateTimePicker',
    ).DesktopDateTimePicker,
  }
})