react-testing-library中Tab离开禁用元素不遵循浏览器顺序如何处理？

我开发了一个包含多个按钮的组件，其中有firstButton、'All On'、'All Off'按钮，还有多个灯泡开关按钮。组件的逻辑是：

• 当所有灯泡都点亮时，'All On'按钮会被禁用
• 当所有灯泡都熄灭时，'All Off'按钮会被禁用

我编写的测试流程如下：

1. 用userEvent.tab()从firstButton切换到'All On'按钮
2. 通过userEvent.keyboard('{Enter}')点击该按钮，使其变为禁用状态
3. 再次执行userEvent.tab()，预期会切换到'All Off'按钮
4. 点击'All Off'按钮使其禁用

在真实浏览器中这个流程完全正常，但在react-testing-library的测试里，第二次userEvent.tab()会回到firstButton，而不是预期的'All Off'按钮。想知道怎么在测试里正确模拟浏览器的Tab顺序？

解决方法 #

react-testing-library的userEvent.tab()默认按DOM渲染顺序切换焦点，但动态禁用元素时，测试环境的焦点处理和真实浏览器存在差异，可从以下几个方向调整：

• 显式控制焦点起始位置
  真实浏览器会自动跳过禁用元素，但测试环境可能需要明确处理。在第二次调用userEvent.tab()前，先确认当前焦点未落在已禁用的'All On'按钮上，手动将焦点移到前一个可聚焦元素后再执行tab：

  // 确认'All On'已禁用后，将焦点移回firstButton
  await userEvent.click(screen.getByText('firstButton'));
  // 执行tab切换到下一个有效元素
  await userEvent.tab();
  

• 配置userEvent.tab()的聚焦范围
  通过focusTrap参数指定可聚焦元素集合，让tab操作只在有效元素间流转：

  // 筛选出所有未禁用的按钮
  const focusableButtons = screen.getAllByRole('button').filter(el => !el.disabled);
  // 从当前焦点出发，在指定范围内执行tab切换
  await userEvent.tab({ focusTrap: focusableButtons });
  

• 验证元素禁用状态的时机
  确保第二次tab操作前，'All On'确实处于禁用状态，避免因为状态更新不及时导致的焦点异常：

  // 先断言'All On'已禁用
  expect(screen.getByText('All On')).toBeDisabled();
  // 再执行tab操作并验证焦点位置
  await userEvent.tab();
  expect(document.activeElement).toBe(screen.getByText('All Off'));
  

• 检查组件的Tab索引配置
  确认按钮的tabIndex属性符合预期，若有自定义tab顺序，需保证测试环境能正确识别DOM节点的渲染顺序和tab优先级。

核心问题在于测试环境不会像真实浏览器那样自动跳过禁用元素并流转焦点，需要在测试中更明确地对齐浏览器的交互逻辑，或者通过参数配置约束tab的切换范围。

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