reactjs - 使用测试库测试 MUI5 Select

Question

我正在使用 create-react-app 5(带有 React 17、Jest 和测试库)以及 MUI 5。我想测试单击一个简单的 Select菜单，并确保出现菜单选项。我尝试了以下方法:

  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()测试后，它打印“选择”按钮，但不打印菜单。

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

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

有人有一个可行的例子吗？

Answer 1

看起来您需要单击按钮元素:

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