從 mui v4 遷移到 v5 | TypeError：無法讀取未定義的屬性（讀取“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 文檔在指定兼容版本方面做得不好。 不過，這些文檔提供了有關從 @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 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>