tailwindlabs
Breaking changes on Menu causing jest + @testinglibrary/react failures due to menu not opening on click
We started off using headless version 2.2.1
our jest tests invoke a click using
... setup test ...
fireEvent.click(menuButton);
... assert menu open and menu buttons rendered ...
These tests pass.
After upgrading to 2.2.2, the tests fail. After reviewing the change log, it appears the click has been replaced with mouseDown.
We upgraded our tests to use fireEvent.mouseDown(menuButton).
The tests started to pass again.
After upgrading to 2.2.3, neither click, nor mouseDown work in our unit tests. For now we are going to roll back to 2.2.1 and use a click event, which should be the expected behavior for a button.
How do we move forward with 2.2.2+
I ran into the same issue this week, I just found a workaround:
act(() => {
fireEvent.keyDown(listboxButton, { key: ' ', code: 'Space', keyCode: 32 })
})
Out of all the ways to open a listbox this is the one that worked for me in vitest + @testing-library/react. For reference: I'm on v2.2.4.
Just chiming in here - I think this can also cause a breaking change if you use a custom component for as={MyComponent} and MyComponent expects the onClick prop, but that's now changed to onMouseDown. It'll break that component then.
@RobinMalfait can you please give us some clarification about unit-testing? changing the way we test our screen for a second time is really time consuming
We recently fixed this issue by ensuring that a click also opens the menu so this should not be an issue anymore.
That said, I would recommend to use real browser tests instead of relying on very specific events because when a user clicks a lot of events happen and not just the click event.
If you still run into issues after updating with this, feel free to open an new issue with a minimal reproduction repo attached so we can take a look.
