useFocusVisible crashes in tests with @testing-library/user-event + Vitest/jsdom

[onlywei]

Provide a general summary of the issue here

When loading any component that loads @react-aria/interactions under the hood (like Button), we get the error:

TypeError: Cannot set property focus of [object HTMLElement] which has only a getter

This happens when userEvent.setup() is used in the unit test:

import { userEvent } from '@testing-library/user-event';

const user = userEvent.setup();

See repro.

🤔 Expected Behavior?

I expect to be able to use testing-library's user events to click around without error.

😯 Current Behavior

The error below immediately occurs as soon as the @react-aria/interactions module is loaded:

TypeError: Cannot set property focus of [object HTMLElement] which has only a getter

💁 Possible Solution

Not sure if this is fixable here or whether it needs to be fixed in testing-library

🔦 Context

No response

🖥️ Steps to Reproduce

See this repro: https://github.com/onlywei/repro-react-aria-vitest-focus#

Version

react-aria-components@1.15.1

What browsers are you seeing the problem on?

Other

If other, please specify.

vitest jsdom

What operating system are you using?

MacOS 15.5

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[onlywei]

This likely depends on testing-library/user-event#1265

[snowystinger]

Seems likely, thanks for finding that.

[onlywei]

Unfortunately @testing-library/user-events hasn't had a release in over a year, despite the fix already being merged.

Is there anything that can be done on React Aria side to work around it?

[snowystinger]

In general, working around things just for testing environments is something we don't like to do. You can use a patching tool such as yarn patch or patch-package to apply that change to user event so that it works in your repo however.

If you think of a change in our logic that makes more sense and avoids this issue, we welcome a contribution for consideration.