teachingtechleads
Posted on October 26, 2019
Hey DEV community, I'm struggling with why the react-dom
library is yelling at me in my tests. So much so, that I spun up a git repo in order to demonstrate what the issue is that I'm facing.
If you pull down the repo, you can see the console warning, even though I'm getting passing tests.
Quick overview of the test:
- Wrap a component in a
- Provide the MockedProvider with a mock query/response
- Mount said component via enzyme
- await the data to refresh and run my assertions
Every time that I run the tests, I get the following console warning, in bright red colors:
Warning: An update to Query 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 */
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
in Query (at App.tsx:37)
in div (at App.tsx:36)
in App (at App.test.tsx:51)
in ApolloProvider (created by MockedProvider)
in MockedProvider (created by WrapperComponent)
in WrapperComponent
I even followed the link and used the act()
function referenced. I actually left that third test in there, because it throws the same warning.
So, is it that I'm using Enzyme to mount instead of React Test Renderer? Anybody have some tips? I'm open to pull requests with best practices for testing.
Posted on October 26, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.