javascript - 从 mui v4 迁移到 v5 |类型错误 : Cannot read properties of undefined (reading 'keyboardDate' )

Question

你好，在将 MUI v4 更新到版本 v5 之后，我得到了失败的测试，看起来像这样

    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

我已经按照指南迁移完成了我认为的所有事情，并且想不出为什么这个失败的组件用新的 <LocalizationProvider dateAdapter={AdapterDateFns} utils={DateFnsUtils}> 包装的原因并且工作正常，只有测试在渲染方法上失败，有人遇到过类似的问题吗？

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

Answer 1

随着新的迁移，一些 Datepicker 依赖项似乎不稳定或不兼容，我发现官方 mui 文档在指定兼容版本方面做得不好。尽管如此，these docs提供有关从@material-ui 到@mui 的选择器迁移的其他信息。

我遇到了未定义的 keyboardDate 问题并通过安装这些特定版本的依赖项解决了它:

我使用的依赖:

"@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",

进口:请记住从 @mui/x-date-pickers 导入 LocalizationProvider、AdapterDateFns、DatePicker，因为 @mui/lab v5 移动了它们的位置。

片段:

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