Act warning when using Testing Library and ReactQuery
Hey, I have a really strange behaviour in testing that I can't wrap my head around it. The context is: we're upgrading React from v17 to v18, bumping ReactQuery from v3 to v4 and bumping Testing Library to latest version in the process. After the changes necessary described in changelogs for all respective packages, we've ended up with an endless wall of
Warning: An update to null inside a test was not wrapped in act(...), and failing tests. It appears that any change inside useQuery, be it a loading state, error state or data arriving, it logs this warning but also it makes the tests fail because for some reason assertions are all over the place with regards to timing. For example, a simple component that has a useQuery and renders "loading" when it's loading has a test to assert that at some point, the "loading" is rendered and than disappears when the data arrive. Data are mocked so that the queryFn returns fine. There was no change there. But here's the punchline, the component is never rendered with the loading state, the test only sees the final state after the loading indicator has been removed and it caused me to wrap it all in act as:
without the act, the loader is never visible for the test. The component for sure re-renders, if I slam a console log inside it, it logs the loading state, but the test doesn't see it.
But, from testing-library POV, this should not be necessary because userEvent is internally wrapped in an act. I can't imaging having to wrap all usages of userEvent.click in an act manually so I don't expect this to be the indended behaviour. Does anybody have any insight into what is going on and where?4 Replies
correct-apricot•3y ago
Do you mock RQ in any way, and if so how do you mock it?
national-goldOP•3y ago
I do not mock RQ in any way. RQ queries use websocket (socket.io) and I am only mocking that using jest.mock. All query functions run unmocked.
national-goldOP•3y ago
In the meantime, I found this https://github.com/testing-library/user-event/issues/497#issuecomment-1551172919
GitHub
userEvent.click triggers warning that it must be wrapped in act in ...
@testing-library/user-event version: 12.2.2 Testing Framework and version: Jest 26.6.3 DOM Environment: whatever default ships with Jest 26.6.3 Relevant code or config beforeEach(() => { userEve...
national-goldOP•3y ago
So more people are arriving to the result that they need to wrap clicks in act manually. But even when I do that, I still have warning that have this in stack trace: