如何用React Testing Library复现MUI Select的点击选择行为

核心测试步骤 #

• 导入测试依赖：@testing-library/react 的 render、screen，以及 @testing-library/user-event。
• 渲染包含MUI Select的目标组件。
• 定位Select触发按钮（MUI Select渲染后为button元素），点击打开下拉菜单。
• 定位目标选项（role为option的元素），点击完成选择。
• 验证选择结果（比如按钮文本更新、回调触发等）。

基础测试示例 #

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import YourSelectComponent from '../YourSelectComponent';

test('成功选择MUI Select中的选项', async () => {
  const user = userEvent.setup();
  render(<YourSelectComponent />);

  // 定位Select按钮并打开下拉
  const selectTrigger = screen.getByRole('button', { name: /请选择选项/i });
  await user.click(selectTrigger);

  // 定位并点击目标选项
  const targetOption = screen.getByRole('option', { name: /选项A/i });
  await user.click(targetOption);

  // 验证选择后按钮文本更新
  expect(selectTrigger).toHaveTextContent('选项A');
});

进阶：验证受控组件的onChange回调 #

如果你的Select是受控组件，可通过模拟回调验证交互逻辑：

test('选择选项时触发onChange回调', async () => {
  const mockOnChange = jest.fn();
  const user = userEvent.setup();
  
  render(<YourSelectComponent onChange={mockOnChange} />);

  const selectTrigger = screen.getByRole('button', { name: /请选择选项/i });
  await user.click(selectTrigger);

  const targetOption = screen.getByRole('option', { name: /选项B/i });
  await user.click(targetOption);

  // 验证回调被调用，且参数符合预期（第二个参数为选项值）
  expect(mockOnChange).toHaveBeenCalledWith(expect.any(Object), 'optionBValue');
});

注意事项 #

• 必须使用async/await配合userEvent操作，因为MUI下拉菜单的展开/收起包含异步动画，需要等待DOM更新。
• 定位元素优先使用role + name的组合，这符合React Testing Library的可访问性优先原则，避免依赖不稳定的DOM结构。
• 如果你的Select有自定义标签或aria属性，需调整name的匹配文本（比如用/选择性别/i匹配“选择性别”的标签）。

内容的提问来源于stack exchange，提问作者Neyo