从 mui v4 迁移到 v5 |类型错误：无法读取未定义的属性(读取"键盘日期")

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文档没有很好地指定兼容的版本。尽管如此，这些文档还是提供了关于从@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>