使用testing-library测试单选按钮组箭头键导航失败如何解决

问题根因 #

1. @testing-library/user-event v14及以上所有交互API均为异步方法，必须使用async/await等待交互执行完成后再执行断言，否则断言会在键盘事件触发前执行，导致校验失败。
2. 原生单选按钮组的箭头导航逻辑要求组内至少有一个处于checked状态的选项，当仅聚焦未选中第一个单选按钮时，按下箭头键不会触发同组选项的焦点/选中状态切换。

修正后测试代码 #

import {
  getByLabelText,
  render,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
...

// 测试函数声明为async
test('arrow key navigation', async () => {
  const {container} = render(
    <div>
      <label htmlFor="apple">
        Apple
        {/* 给第一个单选框设置默认选中，满足箭头导航的生效前提 */}
        <input type="radio" value="apple" id="apple" name="fruit" defaultChecked/>
      </label>
      <label htmlFor="banana">
        Banana
        <input type="radio" value="banana" id="banana" name="fruit"/>
      </label>
    </div>
  )

  const user = userEvent.setup() // v14之后官方推荐的实例初始化写法
  const apple = getByLabelText(container, 'Apple')
  const banana = getByLabelText(container, 'Banana')

  await user.tab() // 等待tab操作执行完成
  expect(apple).toHaveFocus()
  await user.keyboard('{arrowright}') // 等待键盘事件触发完成
  expect(banana).toHaveFocus()
})

核心修改说明 #

• 所有userEvent交互操作必须添加await等待执行完成，新版userEvent已不再支持同步调用，userEvent.setup()初始化的实例稳定性优于直接调用全局方法。
• 若业务场景不允许设置默认选中值，可在聚焦第一个选项后，先通过await user.keyboard(' ')按下空格选中当前项，再触发箭头导航即可符合原生交互逻辑。

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