This was originally a repro/MCVE for what I thought was a React/RTL issue with unnecessary/unexplained act warnings. It turned out that I was doing it wrongTM (and learned/was reminded of something in the process).
When we upgraded to React 18 and RTL 13.4, a number of existing tests started to generate act warnings on fireEvent calls; the general flow is:
- render a view,
- click a button (fireEvent),
- assert that a fetch function is called
The issue is that asserting the fetch is not enough, one must wait for the effect to finish and assert on THAT.
After npm i, use npm t to run the tests in watch mode.
There are two tests you can try, one that generates the warning, and one that does NOT.
console.error
Warning: An update to App inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */You can see that in the proper test, the effect is allowed to finish completely, and there is no warning.
If you prefer, you can use npm run test:nowatch.
Using npm start will open the test application in a browser to see it visually, if desired.
The API endpoint this uses will occasionally have CORS errors, when testing in a browser. I wonder if the API owner is load balancing servers and one of them doesn't allow CORS. Simply keep trying if you get such an error.