用测试库测试MUI5选择

Question

我使用create 5 (带有Reactive17、Jest和testing)以及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 5的Select响应mouseDown事件而不是点击事件。但是userEvent.click两者都发送，所以这不是问题所在。我也在没有运气的情况下尝试了fireEvent.mouseDown。

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

有人有这样的例子吗？

Answer 1

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

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