React Testing Library如何获取输入框触发的Portal下拉元素？

核心思路 #

Portal渲染的元素会脱离组件DOM树，直接挂载到根元素或自定义容器中，但React Testing Library的screen对象默认基于整个document查询，因此可以直接通过它定位Portal内的元素，无需额外配置组件内部的查询范围。

具体测试步骤与代码示例 #

1. 触发下拉菜单显示

先找到输入框，用userEvent模拟真实用户点击（优先于fireEvent，更贴近实际交互流程）：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { BrowserRouter } from 'react-router-dom';
import HeaderInfo from './HeaderInfo';

const mockConfig = {}; // 替换为你的实际配置数据

test('点击输入框后，Portal下拉菜单正常展示', async () => {
  render(
    <BrowserRouter>
      <HeaderInfo config={mockConfig} />
    </BrowserRouter>
  );

  // 定位输入框（可根据实际场景用getByLabelText/getByPlaceholderText等）
  const input = screen.getByPlaceholderText('请选择');
  // 模拟点击触发下拉
  await userEvent.click(input);
});

2. 检查下拉选项是否正常显示

直接通过screen查询Portal内的选项元素，验证数量和内容：

// 接上面的测试代码
// 查询所有下拉选项（用role='option'语义化定位，或用getByText直接匹配文本）
const options = screen.getAllByRole('option');
// 验证选项数量
expect(options).toHaveLength(3);
// 验证每个选项文本存在
expect(screen.getByText('选项A')).toBeInTheDocument();
expect(screen.getByText('选项B')).toBeInTheDocument();
expect(screen.getByText('选项C')).toBeInTheDocument();

3. 测试选项点击交互

模拟点击选项，验证后续行为（比如输入框值更新、状态变化等）：

test('点击下拉选项后，输入框值同步更新', async () => {
  render(
    <BrowserRouter>
      <HeaderInfo config={mockConfig} />
    </BrowserRouter>
  );

  const input = screen.getByPlaceholderText('请选择');
  await userEvent.click(input);

  // 点击目标选项
  await userEvent.click(screen.getByText('选项A'));
  // 验证输入框值变化
  expect(input).toHaveValue('选项A');
});

4. 自定义Portal容器的特殊处理

如果下拉菜单挂载到指定ID的自定义容器（比如id="portal-root"），可以用within()方法限定查询范围，避免和页面其他元素冲突：

test('在自定义Portal容器中查询元素', async () => {
  // 提前创建Portal挂载容器（如果组件依赖这个容器存在）
  const portalContainer = document.createElement('div');
  portalContainer.id = 'portal-root';
  document.body.appendChild(portalContainer);

  render(
    <BrowserRouter>
      <HeaderInfo config={mockConfig} />
    </BrowserRouter>
  );

  const input = screen.getByPlaceholderText('请选择');
  await userEvent.click(input);

  // 在指定容器内查询选项
  const portalOptions = within(portalContainer).getAllByRole('option');
  expect(portalOptions).toHaveLength(3);

  // 测试后清理容器
  document.body.removeChild(portalContainer);
});

关键注意点 #

• 所有交互操作需用async/await包裹，因为userEvent的方法是异步的，确保Portal元素渲染完成后再执行查询。
• 优先使用语义化查询方法（如getByRole、getByLabelText），避免依赖DOM结构的硬编码选择器，提升测试稳定性。

内容的提问来源于stack exchange，提问作者Mateusz Matuś Kowalski