使用react-testing-library断言下拉框选项渲染顺序的正确方案

你当前的写法依赖组件内部的类名、DOM 结构，一旦组件做样式重构、DOM 层级调整，哪怕功能完全正常测试也会失效，确实不符合 React Testing Library 避免耦合实现细节的原则。

推荐你用基于用户交互+标准 ARIA 角色的方案实现，完全不依赖组件内部实现：

• 首先模拟用户点击打开下拉框的真实操作，而非直接查隐藏的 DOM 元素
• 用标准 ARIA 角色 option 查询所有下拉选项，只要是符合无障碍规范的下拉组件，都会默认给选项设置 role="option 属性，不需要额外新增测试标识

具体代码示例如下：

// 先通过标准combobox角色拿到下拉框触发器
const dropdownTrigger = screen.getByRole('combobox');
// 模拟用户点击打开下拉框
fireEvent.click(dropdownTrigger);

// 直接查询所有option角色的元素，完全不依赖内部类名、DOM结构
const selectOptions = screen.getAllByRole('option');

// 断言选项文本顺序符合预期
expect(selectOptions.map(option => option.textContent)).toEqual([
  'All options',
  'Option X',
  'Option Y',
  'Option Z',
]);

如果你们使用的下拉组件没有遵循无障碍规范，没有默认设置正确的 role 属性，可以给每个下拉选项统一设置通用测试标识 data-testid="dropdown-option"，这个标识由你业务侧控制，不会随组件库升级、样式重构变化，查询逻辑如下：

fireEvent.click(screen.getByRole('combobox'));
const selectOptions = screen.getAllByTestId('dropdown-option');
expect(selectOptions.map(option => option.textContent)).toEqual(/* 你的预期选项顺序 */);

如果你的下拉选项是异步加载渲染的，把 getAllByRole/getAllByTestId 替换为对应的异步查询方法 findAllByRole/findAllByTestId，前面加 await 即可。

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