userEvent.keyboard throws TypeError when using arrow keys

[mattcarlotta]

• @testing-library/dom version: 8.12.0
• @testing-library/user-event version: 14.04
• @testing-library/react version: 13.0.0
• Testing Framework and version: jest@27.5.1
• DOM Environment: @testing-library/jest-dom@5.16.3
• Framework: react/react-dom@18.0.0
• Node version: 16.14.2

Relevant code or config:

jest.config.js
setupTest.ts

What you did:

Attempting to test user arrow key navigation within a modal: ArrowRight and ArrowLeft

What happened:

TypeErrors:
ArrowRight
ArrowLeft

Reproduction:

testing branch (failing)

Problem description:

Appears that arrow keys aren't mapped properly. Downgrading to React 17.0.2, Testing Library User Event 13.0.5 and Testing Library React 12.1.4 works as expected on my development branch.

[ph-fritsche]

The error is caused by a Selection with rangeCount === 0.
Any interaction that moves focus on elements without own selection context (anything except <input>, <textarea>) sets the Selection to one Range. So per user interaction there is no focus on such an element without a Range on the Selection.
We probably should still guard against this here.

If you replace your fireEvent.click with await user.click the error will be gone.

[pascalduez]

Hi,

the issue can be reproduced simply by:

const user = userEvent.setup();

render(
  <>
    <label htmlFor="one">One</label>
    <input type="radio" name="test" id="one" />
    <label htmlFor="two">Two</label>
    <input type="radio" name="test" id="two" />{' '}
  </>
);

// TypeError: Cannot read property 'nodeType' of null
await user.keyboard('[ArrowRight]');

    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^14.1.1",
    "jest": "^28.1.0",
    "jest-environment-jsdom": "^28.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"

Real world test

const user = userEvent.setup();

render(
  <>
    <label htmlFor="one">One</label>
    <input type="radio" name="test" id="one" />
    <label htmlFor="two">Two</label>
    <input type="radio" name="test" id="two" />{' '}
  </>
);

await user.tab();

expect(screen.getByRole('radio', { name: 'One' })).toHaveFocus();
expect(screen.getByRole('radio', { name: 'One' })).not.toBeChecked();

await user.keyboard('[Space]');

expect(screen.getByRole('radio', { name: 'One' })).toBeChecked();

// ¯\_(ツ)_/¯
// TypeError: Cannot read property 'nodeType' of null
await user.keyboard('[ArrowRight]');

expect(screen.getByRole('radio', { name: 'Two' })).toHaveFocus();
expect(screen.getByRole('radio', { name: 'Two' })).toBeChecked();

[github-actions]

🎉 This issue has been resolved in version 14.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ph-fritsche]

@all-contributors add @mattcarlotta bug

[allcontributors]

@ph-fritsche

I've put up a pull request to add @mattcarlotta! 🎉