How to test Material ui's DatePicker with Jest and Enzyme

Question

i've got a problem. I'm trying to test material ui's datePicker (https://mui.com/api/date-picker/) with Jest and Enzyme. I've searched alot but couldnt find anything that would help me... I hope that you will guide me. Here's what i got:

DatePickerFilter.tsx

import React, {useState} from 'react';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';
import TextField from '@mui/material/TextField';
import styled from '@emotion/styled';

export const StyledDatePicker = styled(DatePicker)`
  width: 320px !important;
`;
const DatePickerFilter = () => {
  const [date, setDate] = useState('10/10/2021')

  const handleChange = (newValue: any) => {
    setDate(newValue)
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <StyledDatePicker
        label="Date"
        views={['day']}
        value={date}
        onChange={handleChange}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

MyBookings.test.tsx

export default DatePickerFilter;

import React from 'react';
import { mount } from 'enzyme';
import { Render } from '../../../utilities/TestsUtils';
import DatePickerFilter from '../../common/DatePickerFilter';

describe('MyBookings > DatePickerFilter', () => {
  it('should not change date if its before today', () => {
    const wrapper = mount(
      <Render>
        <DatePickerFilter />
      </Render>
    );
    wrapper.find('input').simulate('change', {target: {value: '11/10/2021'}});

    console.log(wrapper.find('input').debug())
    wrapper.unmount();
  });
});

And here's a function util that gives me access to redux's store

    export const store = configureStore({
  reducer: {
    booking: bookingReducer,
    myBookings: myBookingsSlice,
    officeSpaces: officeSpacesSlice,
    filters: filtersSlice
  },
});

export const Render = ({ children }: any) => {
  return (
    <Provider store={store}>
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </Provider>
  );
};

I'm trying to change input's value by simulate 'change' event, but it doesnt want to change.

Here's log of wrapper.find('input').debug()

<input aria-invalid={false} aria-describedby={[undefined]} autoComplete={[undefined]} 
  autoFocus={false} defaultValue={[undefined]} disabled={[undefined]} id={[undefined]} 
  onAnimationStart={[Function: handleAutoFill]} name={[undefined]} placeholder={[undefined]} 
  readOnly={true} required={false} rows={[undefined]} value="10/10/2021" 
  onKeyDown={[Function (anonymous)]} onKeyUp={[undefined]} type="text" aria-readonly={true} 
  aria-label="Choose date, selected date is Oct 10, 2021" onClick={[Function: openPicker]} 
  className="MuiOutlinedInput-input MuiInputBase-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" 
  onBlur={[Function: handleBlur]} onChange={[Function: handleChange]} onFocus={[Function: handleFocus]} />

Answer 1

The answer to this problem is mentioned here https://github.com/mui/material-ui/issues/27038.

If you don't need the Mobile variants, you can do what I did and import the DesktopDatePicker. This way I don't reproduce the problem with triggerin a change on an input.