使用测试库测试 MUI5 Select

Question

我正在使用 create-react-app 5（带有 React 17、Jest 和测试库）以及 MUI 5。我想测试单击一个简单的“选择”菜单，并确保显示菜单选项。我尝试了以下方法：

  it('shows the menu', async () => {
    render(<FormControl fullWidth>
      <InputLabel id="testselect-label">Age</InputLabel>
      <Select
        labelId="testselect-label"
        id="testselect"
        data-testid="testselect"
        label="Age"
        value={10}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>);
    const selectButton = screen.getByTestId("testselect");
    userEvent.click(selectButton);
    expect(await screen.findByRole('presentation')).toBeInTheDocument();
  });

但菜单（有role="presentation"）没有出现，因此测试失败。如果我screen.debug()在测试后调用，它会打印“选择”按钮，但不会打印菜单。

我已经看过这个问题/答案，我发现 MUI5 的 Select 响应 mouseDown 事件而不是 click 事件。但userEvent.click两者都发送，所以这不是问题。我也尝试过fireEvent.mouseDown但没有运气。

我还尝试了调试器，据我所知，onMouseDown相关 MUI 组件 ( SelectInput) 的处理程序从未被调用。

有人有一个有效的例子吗？

Answer 1

看起来您需要单击该button元素：

    const selectButton = within(screen.getByTestId('testselect')).getByRole('button');
    userEvent.click(selectButton);