测试单选按钮组的箭头键键盘导航

Question

我正在用来testing-library测试单选按钮组的实现。我可以测试将tab焦点设置到第一个单选选项，但我无法正确测试箭头键导航。

这是我的测试：

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

test('arrow key navigation', () => {
  const {container} = render(
    <div>
      <label htmlFor="apple">
        Apple
        <input type="radio" value="apple" id="apple" name="fruit"/>
      </label>
      <label htmlFor="banana">
        Banana
        <input type="radio" value="banana" id="banana" name="fruit"/>
      </label>
    </div>
  )

  const apple = getByLabelText(container, 'Apple')
  const banana = getByLabelText(container, 'Banana')

  userEvent.tab()
  expect(apple).toHaveFocus() // This assertion passes
  userEvent.keyboard('{arrowright}')
  expect(banana).toHaveFocus() // This assertion fails
})

Answer 1

我在这里遇到了同样的情况，我发现组件没有重新渲染它应该的样子，这就是测试失败的原因