从 mui v4 迁移到 v5 | TypeError：无法读取未定义的属性（读取“keyboardDate”）

Question

Hello after updating the MUI v4 to version v5 i got faling test's that's looking like this

    TypeError: Cannot read properties of undefined (reading 'keyboardDate')

      17 |   it("should render correctly without any errors", () => {
      18 |     expect(
    > 19 |       renderer.create(<DatePickerElement onChange={onChange} value="10/08/1981" />).toJSON(),
         |                ^
      20 |     ).toMatchSnapshot();
      21 |   });
      22 |   // props testing

I've done i think everything according to the guide migration and can't think of reason why this faling the component is wrapped with new <LocalizationProvider dateAdapter={AdapterDateFns} utils={DateFnsUtils}> and working fine only the test's are faling at render method did any one encountred similiar issue?

it("should render correctly without any errors", () => {
expect(
  renderer
    .create(<DatePickerElement onChange={onChange} value="10/08/1981" />)
    .toJSON(),
).toMatchSnapshot();  });

Answer 1

With the new migration, some Datepicker dependencies seem to be unstable or incompatible, and I find the official mui documentation doesn't do a good job of specifying compatible versions. Still, these docs provide additional info about the pickers migration from @material-ui to @mui.

I ran into the undefined keyboardDate issue and solved it by installing these specific versions of dependencies:

Dependencies I used:

"@date-io/date-fns": "^1.3.13",
"@date-io/moment": "^1.3.13",
"date-fns": "^2.23.0",
"@mui/x-date-pickers": "^5.0.10",
"@mui/lab": "^5.0.0-alpha.112",

Imports: Please remember to import LocalizationProvider, AdapterDateFns, DatePicker from @mui/x-date-pickers , as @mui/lab v5 moved their locations.

Snippet:

<LocalizationProvider dateAdapter={AdapterDateFns} utils={MomentUtils}>
  <DatePicker 
    label='Start Date'
    value={value}
    onChange={handleChange}
    inputFormat="mm/dd/yyyy"
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>