What could cause an "update to … inside a test was not wrapped in act" despite using act?

I'm doing my first steps with testing React functional components with something like:

import React from 'react';
import { render } from '@testing-library/react';
import { act } from 'react-dom/test-utils';

import App from './App';

test('basic app rendering', () => {
  act(() => {
    render(<App />);

However this is resulting in the infamous warning that we have to use act:

Warning: An update to SomeSubComponent 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://reactjs.org/link/wrap-tests-with-act

The link brings me back to where I'm coming from, and basically shows an example that is using act exactly like I do.

I see a few possibilities:

  • Something is wrong with my usage of act.
  • Something is wrong with my test setup / configuration (I'm using basically a plain create-react-app typescript template).
  • Something is wrong with the component I'm testing.

Any ideas what could lead to this situation that I get the "not wrapped in act" warning despite already wrapping in act?

Read more here: https://stackoverflow.com/questions/64900573/what-could-cause-an-update-to-inside-a-test-was-not-wrapped-in-act-despite

Content Attribution

This content was originally published by bluenote10 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: