Description
React version: 16.13.1
(latest) and 0.0.0-7f28234f8
(next)
Steps To Reproduce
- Create component that has multiple effects (i.e.
useEffect
calls) - Render component in a jest test
Link to code example: https://codesandbox.io/s/long-sound-xhe5w?file=/package.json
The current behavior
A error is logged for each call of useEffect
.
The expected behavior
An error per component calling useEffect
.
Context
Current errror:
Warning: An update to Component ran an effect, but 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 */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
at Component (https://xhe5w.csb.app/src/index.test.js:23:20)
at App (https://xhe5w.csb.app/src/index.test.js:35:20)
The prescription is to wrap the update in act(). The warning may be unintented because a component with an effect rendered unexpectedly. But due to the rules of hooks it's unlikely that we remove a useEffect
call: It's easier to prevent rendering a component (wrong branch logic, return early etc) than preventing an effect (which requires moving it to a component we render conditionally).
From my experience most of these cases come down to adding an act()
and not changing component implementation. In these cases firing errors for each effect makes the console output unreadable. Especially if you compose custom hooks and end up with 4+ effects per component.
An alternate solution would be to only fire an error if the effect was actually scheduled (see #19318).