React Testing Library测试MUI Select时无法关闭下拉菜单

开发者阿泽

2026-7-20

问题分析与解决方案

你的测试代码执行第三步时出错，核心原因是异步操作未正确处理，再加上一些冗余的API使用和不稳健的元素定位逻辑，导致DOM状态不同步引发错误。

修正后的完整测试代码

import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import UserEvent from "@testing-library/user-event";
import "@testing-library/jest-dom/extend-expect";
import SelectExample from "./SelectExample";

test("select country and close dropdown menu", async () => {
  const user = UserEvent.setup();
  render(<SelectExample />);

  // 步骤1：点击展开下拉菜单
  const selectTrigger = screen.getByRole("button", { name: /country/i });
  await user.click(selectTrigger);

  // 步骤2：选择Brazil选项并验证选中结果
  await user.click(screen.getByText(/brazil/i));
  expect(screen.getByText("Selected country: brazil")).toBeInTheDocument();

  // 步骤3：点击关闭下拉菜单并验证菜单已隐藏
  await user.click(selectTrigger);
  await waitFor(() => {
    expect(screen.queryByText(/brazil/i)).not.toBeInTheDocument();
  });
});

关键修正点说明

移除冗余的act包裹：Testing Library的render方法已经自动封装了act逻辑，手动包裹反而会干扰正常的DOM更新流程。
统一使用异步交互：UserEvent的所有交互方法都是异步的，必须用await等待操作完成，确保每一步DOM状态稳定后再执行下一步。
更稳健的元素定位：直接通过getByRole("button", { name: /country/i })定位Select的触发按钮，比嵌套getByTestId的写法更直观，也符合Testing Library推荐的"以用户视角定位元素"的原则。
补充断言逻辑：每一步操作后都添加对应的断言，验证选中内容是否显示、菜单是否成功关闭，让测试覆盖完整的交互流程。