如何在React Testing Library中测试Shift+Tab按键操作？

你的问题核心在于没有正确处理user-event的异步特性，以及部分API的使用语法有误。结合你使用的RTL 12和@testing-library/user-event ^13.5.0版本，以下是可行的解决方案：

关键修正点 #

• 所有userEvent交互必须用await：user-event 13.x的所有交互方法都是异步的，会模拟真实用户的行为流程，不等待完成就断言会导致焦点状态还未更新。
• 使用userEvent.tab({ shift: true })实现反向跳转：这是最直接可靠的方式，专门用于模拟Shift+Tab的焦点反向遍历。
• 正确使用keyboard语法：如果一定要用keyboard方法，需使用{Shift>}Tab{/Shift}表示按住Shift后按Tab再释放Shift。

修正后的测试代码 #

it('should enter and leave element with TAB', async () => {
  render(
    <>
      <input data-test="input1"/>
      <button>Button 1</button>
    </>
  );

  const input1 = screen.getByTestId('input1');
  const button1 = screen.getByRole('button', { name: /^Button 1$/i });

  await userEvent.click(input1);
  expect(input1).toHaveFocus();
  
  // 正向Tab跳转
  await userEvent.tab();
  expect(button1).toHaveFocus();
  
  // 方法1：用tab的shift参数实现反向跳转（推荐）
  await userEvent.tab({ shift: true });
  expect(input1).toHaveFocus();

  // 方法2：用keyboard的正确语法实现反向跳转
  await userEvent.tab(); // 回到按钮
  await userEvent.keyboard('{Shift>}Tab{/Shift}');
  expect(input1).toHaveFocus();
});

为什么之前的代码无效 #

• 未加await：原测试中没有等待userEvent操作完成，断言执行时焦点还未完成跳转，导致结果不符合预期。
• keyboard语法错误：{Shift}{Tab}只是依次按下Shift和Tab，并非按住Shift再按Tab，无法触发反向焦点遍历。
• fireEvent局限性：fireEvent.keyDown是底层API，只会触发单个事件，不会模拟完整的焦点遍历逻辑，因此无法正确实现Shift+Tab的效果。

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