单元测试中userEvent.click未触发Primereact下拉框预期变化

• 问题根源：PrimeReact的Dropdown选项面板是通过Portal挂载到document.body下的，并非渲染在组件自身的container容器内，所以原测试中用container.querySelector无法定位到该元素。

• 修改后的测试代码：

import {
  render,
  screen
} from "@testing-library/react";
import "@testing-library/jest-dom";
import userEvent from "@testing-library/user-event";

import GroupedDemo from "../src/App";

describe("Test App Component", () => {
  it("Primereact dropdown should show panel on click", async () => {
    render(<GroupedDemo />);
    // 定位第二个Dropdown并触发点击
    await userEvent.click(screen.getAllByText("Select a City")[1]);
    // 用语义化角色查询面板（推荐方式）
    const dropdownPanel = screen.getByRole("listbox");
    // 若需用类名查询，需从document.body中查找
    // const dropdownPanel = document.body.querySelector(".p-dropdown-panel");
    expect(dropdownPanel).toBeInTheDocument();
  });
});

• 关键说明：
  1. 优先使用语义化查询方法（如getByRole("listbox")），这符合Testing Library的最佳实践，比依赖类名更稳定，也更贴合用户实际交互逻辑。
  2. 若坚持使用类名定位，必须从document.body中查询，而非组件的container。
  3. userEvent.click会自动处理组件的异步更新，无需额外嵌套act或waitFor。

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