如何测试点击Material-UI Autocomplete传入的自定义PaperComponent？

核心原因 #

Material-UI的Autocomplete组件默认有两个特性会导致测试时查询不到自定义Paper内部元素：

1. 下拉面板（自定义PaperComponent）为懒渲染机制，仅当下拉框处于展开状态时才会挂载到DOM，未展开时不会生成对应节点
2. 下拉面板默认通过Portal挂载到document.body节点下，而非父组件的DOM树内部，如果你用render返回的container做范围查询，会命中不到元素

解决步骤 #

• 第一步：测试逻辑中先触发下拉展开
  先通过aria-label或其他属性定位到Autocomplete关联的输入框，模拟点击/聚焦/输入操作触发下拉展开，此时自定义Paper组件才会渲染到DOM
• 第二步：使用全局screen查询元素
  用React Testing Library的screen对象做查询，它默认会检索整个document节点，能命中Portal挂载的元素，不要用render方法返回的container做范围查询
• 第三步（可选）：禁用Portal简化查询
  测试场景下可以给Autocomplete添加disablePortal属性，让下拉面板直接渲染在父组件DOM树内，无需挂载到body下，降低查询复杂度

示例测试代码 #

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import ParentComponent from './你的组件路径';

test('点击高级搜索页脚触发对应逻辑', async () => {
  const user = userEvent.setup();
  render(<ParentComponent />);

  // 1. 定位输入框，触发下拉展开
  const autocompleteInput = screen.getByLabelText(/instructorDropdown-1/i);
  await user.click(autocompleteInput);

  // 2. 查询自定义页脚元素，建议给可点击div提前添加data-testid="advanced-search-footer"
  // 注：如果用文本查询，测试环境需要提前注入国际化配置，否则FormattedMessage渲染的文本无法识别
  const footerBtn = await screen.findByTestId('advanced-search-footer');
  
  // 3. 模拟点击
  await user.click(footerBtn);

  // 4. 补充你的业务逻辑断言
})

注意事项 #

如果使用FormattedMessage渲染页脚文本，测试环境必须配置对应的国际化Provider，否则文本无法正常渲染，会导致文本类查询失效，更稳妥的方式是直接给可点击的div添加唯一的data-testid做查询标识。

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