userEvent.type(...) 应该将哪个元素与 MUI 的 DesktopDatePicker TextField 一起使用？

Question

如何使用react-testing-library在MUI日期选择器的TextField输入中输入user-event内容？我可以看到正在应用面具

我已经尝试userEvent.type(inputEl, '1')过并且userEvent.keyboard('1'). 在这两种情况下，输入都保持为空。

我当前的假设是，重新渲染将我的更新替换为高阶组件的空状态（这是有道理的，基于应用程序的输入日期格式掩码）。

文档示例按预期工作，因此我的问题特定于MUI datepicker。

可以在此沙箱中找到该组件（和测试）的淡化版本。

下面是渲染的 HTML 的副本，以证明我正在使用 a 定位输入元素data-testid，但这不起作用：

screen.getByTestId('date-selector-text-field').outerHTML:
<input
  aria-invalid="false"
  placeholder="dd / mm / yyyy"
  readonly=""
  type="text"
  aria-readonly="true"
  aria-label="Choose date"
  data-testid="date-selector-text-field"
  class="MuiOutlinedInput-input MuiInputBase-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
  value=""
  aria-describedby="mui-1-helper-text"
  id="mui-1"
>

Answer 1

我添加了以下内容，以确保在测试中为桌面呈现 DatePicker。有关更多信息，您可以在这里找到：https://github.com/mui/material-ui-pickers/issues/2073#issuecomment-671834179

beforeAll(() => {
    // add window.matchMedia
    // this is necessary for the date picker to be rendered in desktop mode.
    // if this is not provided, the mobile mode is rendered, which might lead to unexpected behavior
    Object.defineProperty(window, "matchMedia", {
      writable: true,
      value: (query: any) => ({
        media: query,
        // this is the media query that @material-ui/pickers uses to determine if a device is a desktop device
        matches: query === "(pointer: fine)",
        onchange: () => null,
        addEventListener: () => null,
        removeEventListener: () => null,
        addListener: () => null,
        removeListener: () => null,
        dispatchEvent: () => false,
      }),
    });
  });
  afterAll(() => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    delete window.matchMedia;
  });

如果日期选择器中已有值，则在调用 时，请在 之前userEvent.type()添加。需要清除，因为我们正在模拟实际的用户行为，如果您已经有一个值（我在测试用例中确实有），您将无法输入某些内容。await userEvent.clear()await userEvent.type()