I have this simple test in React Testing Library. I am using RTL version 12 and "@testing-library/user-event" version "^13.5.0". Moving focus with userEvent.tab() works well, but moving it back with userEvent.keyboard('{Shift}{Tab}'); does not work and focus stays on a button. I tried using async and await as suggested in some places but it did not fix the issue. How to do it properly so that shift tabbing work?
it('should enter and leave icon gallery with TAB', () => {
render(
<>
<input data-test="input1"/>
<button>Button 1</button>
</>
);
const input1 = screen.getByTestId('input1');
const button1 = screen.getByRole('button', { name: /^Button 1$/i });;
userEvent.click(input1);
expect(input1).toHaveFocus();
userEvent.tab();
expect(button1).toHaveFocus();
userEvent.keyboard('{Shift}{Tab}');
expect(input1).toHaveFocus();
})
})
I have same effect when I use:
fireEvent.keyDown(button1, { key: 'Tab', shiftKey: true });
or
userEvent.keyboard('{Shift>}{Tab}{/Shift}');
Focus just seems trapped on button1
I managed to solve my problem by using:
userEvent.tab({ shift: true });