使用 material-ui/picker 进行单元测试答案

【问题标题】：Unit Testing with the material-ui/picker使用 material-ui/picker 进行单元测试
【发布时间】：2020-06-09 06:33:10
【问题描述】：

我在我的应用程序中使用了 material-ui/picker，并希望拥有完整的单元测试覆盖率。我同时使用 KeyboardDatePicker 和 KeyboardTimePicker 让用户可以选择在他们不喜欢使用选择器时输入日期和时间。

我应该在哪里声明“data-testid”，以便能够执行 fireEvent.change 或 userEvent.type（或者如果有其他推荐的触发此类事件的方法）？

我尝试将 data-testid 添加为选择器本身的 props 的一部分、inputProps 的一部分和 InputAdornmentProps 的一部分，但是当我尝试运行时：

fireEvent.change(getByTestId('keyboardtimepicker-testid'), { target: { value: '12:00' } })

和

await userEvent.type(getByTestId('keyboardtimepicker-testid'), '12:00')

两者都抛出错误。

如果我将 data-testid 放在 KeyboardButtonProps 中，我不会看到错误，但不会触发 onChange 函数。

我应该如何使用 material-ui/picker 中的组件进行单元测试？

【问题讨论】：

【解决方案1】：

您可以将data-testid 直接传递给组件，但更喜欢使用组件的辅助功能来运行您的测试。

<DatePicker data-testid="something" />

【讨论】：

【解决方案2】：

原来我实际上是在使用 InputProps 而不是 inputProps。两者都是对象上的有效道具，但非常不同。

【讨论】：