单元测试中如何用Tab键聚焦非标准自定义按钮？

先排查DOM结构（最关键） #

首先用screen.debug()打印测试中渲染后的DOM，确认你的<my-button>最终输出的真实元素：

• 如果根元素是<div role="button">，检查是否有tabindex="0"（tabindex="-1"会导致无法通过Tab聚焦）；
• 如果组件内部嵌套了原生<button>，那真正可聚焦的是这个原生按钮，而非自定义组件的根元素，测试时要定位到它。

针对不同场景的解决方法 #

1. 确保使用正确的userEvent姿势

如果你用的是@testing-library/user-event@14+，必须先初始化user实例，且所有操作要用async/await：

import userEvent from '@testing-library/user-event';

test('自定义按钮可通过Tab聚焦', async () => {
  render(<MyButton />);
  const user = userEvent.setup();
  
  // 先将初始焦点设置到body（确保Tab从起点开始）
  document.body.focus();
  await user.tab();
  
  // 定位到实际可聚焦的元素（比如用role查询）
  const focusableButton = screen.getByRole('button');
  expect(focusableButton).toHaveFocus();
});

2. 定位正确的可聚焦元素

不要直接用自定义组件的测试ID获取根元素，而是用语义化查询定位内部可交互元素：

• 用screen.getByRole('button')（不管是原生button还是加了role的div）；
• 如果有多个按钮，结合name或testId筛选：screen.getByRole('button', { name: '提交' })。

3. 处理异步渲染/状态延迟

如果组件有异步逻辑（比如接口请求后才启用按钮），用findBy*查询等待元素就绪：

test('异步加载后按钮可聚焦', async () => {
  render(<MyButton />);
  const user = userEvent.setup();
  
  // 等待按钮可交互
  const myButton = await screen.findByRole('button', { disabled: false });
  document.body.focus();
  await user.tab();
  
  expect(myButton).toHaveFocus();
});

4. 绕过Tab模拟，直接验证聚焦能力

如果Jest/jsdom的Tab模拟存在兼容性问题，可以直接调用元素的focus()方法，验证组件本身具备可聚焦性：

test('自定义按钮可被聚焦', () => {
  render(<MyButton />);
  const myButton = screen.getByRole('button');
  
  myButton.focus();
  expect(myButton).toHaveFocus();
  // 同时验证tabindex属性
  expect(myButton).toHaveAttribute('tabindex', '0');
});

5. 检查组件的disabled状态

测试时确保按钮处于非禁用状态，因为disabled元素会被Tab流跳过：

// 渲染时传入enabled属性（根据你的组件API调整）
render(<MyButton disabled={false} />);

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