[RAC] Button's `onPress` behaves differently in test and dev environments

[annaet]

Provide a general summary of the issue here

In the browser the React ARIA Button component swallows pointerdown events, meaning that other components listening on that event do not trigger.

But in a test environment clicking the Button via userEvent.click it does not swallow the event leading to tests erroneously passing.

I have created a minimal repo demonstrating this issue: https://github.com/annaet/react-aria-button-bug-demo

🤔 Expected Behavior?

Behaviour should be consistent across browser and tests.

😯 Current Behavior

Events are swallowed by Button on browser but not during tests.

💁 Possible Solution

Ideally Button would not swallow these events so that event listeners continue to work as expected.

🔦 Context

No response

🖥️ Steps to Reproduce

Clone this demo repo: https://github.com/annaet/react-aria-button-bug-demo

Run the app using npm run dev to show the browser behaviour. This shows two Menu elements that listen for pointerdown events. On an external pointerdown the menu should close.

You can open both menus at the same time, as the second button click swallows the pointerdown event meaning the first menu does not close.

The expected behaviour is in the Menu.test.tsx file, where when the second menu is clicked the first is closed.

This shows the behaviour is different between a test and development environment.

Version

"react-aria-components": "1.7.1"

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

OSX

🧢 Your Company/Team

Hudl

🕷 Tracking Issue

No response

[annaet]

This seems similar to #6134, but in this case onPress is firing but with different behaviour in the two environments.

[devongovett]

JSDOM does not support pointer events, so in tests, the fallback branch using legacy mouse/touch events is used.

In some of our tests where we need to test pointer events specifically, we install a mock. Maybe something like that could work for you?

[annaet]

Ah that's interesting, I didn't know about JSDOM not supporting pointer events.

Does that mean it's intentional for React ARIA buttons to swallow all pointer events? This makes it so other event listeners can't receive the events either.

[devongovett]

I'm not sure what you mean by "swallow". We stopPropagation when handling an event to avoid duplicate conflicting handlers. If you need a parent element to handle events for children you should use a capturing listener. There's also a continuePropagation method on PressEvent you can call.

[Cyral]

I was losing my mind until I found this thread. In vitest no matter what I tried, userEvent.click is not working for RAC. Putting this here for those googling:

When testing react-aria components using vitest and userEvent, you need to add something like this in your setup file:

vi.stubEnv('NODE_ENV', 'test');

Which enables the test code path in usePress. Otherwise userEvent.click will not work on react-aria components (but fireEvent) will.