Can't fix "not wrapped in act(...)" warning with Jest and React Testing Library

[FlorianBurgevin]

Hello,

I'm trying to test my React Application with React Testing Library and Jest but I always have the following error.

An update to StoreProvider inside a test was not wrapped in act(...)

I tried many things like put act() function around my test but can't be able to remove the warning and get the correct result.

Here's a simplified project that demonstate the problem:
https://codesandbox.io/s/adoring-haslett-6rq34?file=/src/PageContent.test.js

Thanks for your help.

[eps1lon]

Edit: See #641 (comment) for the correct answer.

A, more general, problem is that your component might try to update the state after it is unmounted. You can fix this with

React.useEffect(() => {
	let current = true;

	asyncWork.then(() => 
		if (current === true) dispatch();
    })

	return () => (current = false);
}, dependencies)

This is especially problematic if you have tests that fail. These will unmount your component before your async work had time to finish.

Either way this question is better suited for StackOverflow or spectrum. It's not an issue with react-testing-library.

[kentcdodds]

This is not exactly correct. You should never have to wrap render in act and you should rarely need to use act directly.

You need to wait for the text (as @eps1lon suggests), but once you add that async util (which is automatically wrapped in act) the error goes away and there's no need for you to call act yourself.

But I much prefer the find* queries which use waitFor under the hood, so if I were writing this test, this is what I would do:

https://codesandbox.io/s/great-dijkstra-njz7k?file=/src/PageContent.test.js:232-317

render(<App />)
expect(await screen.findByText('STATUS = 0')).toBeInTheDocument()

And that's it :)

[FlorianBurgevin]

Thank you very much @kentcdodds & @eps1lon !

It' OK with await findByText.

As render already use act internally, I would prefer the second solution.

Here's my working piece of code.

const { findByText } = render(<App />)
expect(await findByText('STATUS = 0')).toBeInTheDocument();

[kav-g-dev]

Thank you @kentcdodds , I'm wondering if the find* is waiting for all the chaining changes in the UI.
Let say we have multiple API calls in the component which some of them may update the UI. Then is the find* resolve the element based on the last render!?
Cause in my case I couldn't see my mocked responses by using find* but just after replacing it by waitFor, it works fine!