Get Rid of the "not wrapped in act(...)" Warning
For many years, the most annoying thing about writing tests with the React Testing Library is when the "not wrapped in act(...)" warning appears in your console. act is a React testing util that ensures all UI updates are wrapped up before proceeding with your test case. What we often miss is that we actually don't need act and that this error is there to tell us something instead, and that is: You are not testing everything!
In this lesson, we are going to understand why the "not wrapped in act(...)" shows up and how to get rid of it!
Instructor: [0:05] One of the most annoying errors that could show up in your console when testing your components is the, "An update to app inside the test was not wrapped in act." This error shows up to tell you something, and that is, you are not considering everything in your test case.
[0:15] Let us see a scenario where this error might pop up. In our component, we now have a state variable that will help us keep track of if something is loading. Then scrolling down, we have a button that when clicked will call the fetch data function.
[0:31] This button also depends on the isLoading state variable to show the user the text loading for data or the text get more data. It also depends on the isLoading state variable to define if this button is disabled or not.
[0:43] Looking at our fetch data function, we can see that we are setting our loader to be true, waiting for our data to be fetched and that's setting our loader to . Also, if any error happens, we will set our loader to be as well.
[0:54] Let us write the test case to assert we call our getData function. In this test, we want to assert that our getData function was called. To do this, we will need a mock function that will let us know if it was called. Let's leverage the jest.fn function. Then we can pass this getData function to our component whilst we render it as props.
[1:16] We'll need to query for our button so let us leverage our ByRole query to find the button with the text getMoreData in it. This button needs to be clicked though so let us use the fire event helper and call the click function on it. Finally, we will assert if our getData function was called once and run our test.
[1:32] You should see that our test has passed but if we scroll up a bit here there it is, the act warning. Why is this warning appearing you might be thinking? Well, luckily, nowadays it tells us why and this is because we forgot that after our getData function is called our setIsLoading function is still called afterwards.
[1:54] Every time you see this error from now on, you should think to yourself, what did I forget in my test? To fix this, we need to make sure that we consider the scenario where our folder reverts from true to .
[2:04] To do this, we can leverage the waitForElement to be removed to assert that our loading for data text has disappeared from the UI. Now, if we rerun our test, it still passes and we have no more errors.
Love the "not wrapped in act(...)" solution 🚀.