Я создаю компонент, который обрабатывает фокус на основе событий клавиатуры пользователя (таких как нажатие клавиши ввода, стрелки и т. Д.).
Было бы предпочтительным проверить, что компонент игнорирует клавишу табуляции при нажатии клавиши.
Тем не менее, при срабатывании события на клавиатуре фокус не меняется, как в браузере.
С учетом компонента реакции в Component.js
import React from 'react'
export default () => (
<>
<button data-testid="one">
one
</button>
<button data-testid="two">
two
</button>
</>
)
и следующий тест Component.test.js
import React from 'react'
import 'jest-dom/extend-expect'
import { cleanup, fireEvent, render, wait } from 'react-testing-library'
import Component from './Component'
afterEach(cleanup)
it('changes focus on tab', async () => {
const { getByTestId } = render(<Component />)
const one = getByTestId('one')
const two = getByTestId('two')
one.focus()
expect(one).toHaveFocus()
fireEvent.keyDown(one, {
key: 'Tab',
code: 9,
charCode: 9
})
await wait(() => {
expect(two).toHaveFocus()
})
})
тест не пройден, поскольку элемент data-testid="one"
все еще имеет фокус.
См. CodeSandbox для редактируемой версииэтот код