Блог

Я использую 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
})