Update of the @testing-library/react version to 14.0.0 throws "act" warnings

[maive1]

• @testing-library/react version: 14.0.0
• Testing Framework and version: jest 29.4.2
• DOM Environment: @testing-library/jest-dom: 5.16.5

Relevant code or config:

   const saveButton = screen.getByRole('button', { name: /save/i });
    await waitFor(() => expect(saveButton).toBeEnabled());
    await testUser.click(saveButton);

What you did:

I upgraded the version of @testing-library/react from 13.4.0 to 14.0.0. And I started having problems in all the tests of my application. Before this update this did not happen.

What happened:

I'm getting more act warnings now with @testing-library@14.0.0.
Tested with await waitFor, and still throwing act warnings with userEvent that triggers a state change.

Reproduction:

You can fork to reproduce the issue:
here: https://codesandbox.io/s/act-warning-wait-for-react-18-forked-6jurf2

Problem description:

The state update (setState()) seems to make the test library think that act is incomplete, even though it is. This happens for every unit test where an event is fired, such as userEvent.click() or userEvent.upload().

[eps1lon]

What happens if you wrap the timer advancement in act?

+await act(() => {
   await new Promise((resolve) => {
     setTimeout(resolve, 300);
   });
+});

[GP-marco]

We are facing the same issue. The log output is 20x longer than before.

[eps1lon]

If you're facing the same issue, please just upvote the issue or, if you want to contribute, provide a minimal, cloneable reproduction. "+1" comments are not helpful and create unnecessary notifications for everybody subscribed to this issue.

[sanderkoenders]

I have the same issue, wrapping testUser.click(saveButton) inside an act call resolves the issue. The problem is that this will have major impact on our codebase. I am wondering why this is now needed. It's not listed in the release notes as breaking change so I'd say it should not break moving from 13.x.x to 14.0.0.

[maive1]

What happens if you wrap the timer advancement in act?

+await act(() => {
   await new Promise((resolve) => {
     setTimeout(resolve, 300);
   });
+});

That was the attempt to replicate the problem I have, which goes beyond that. I have problems with all the tests that are many files with unit and integration tests that have problems due to the latest version of the library, as detailed at the beginning. When I downgrade the version of the library in the package.json(), to the previous one, the problems with act() no longer appear.

[eps1lon]

I have problems with all the tests that are many files with unit and integration tests that have problems due to the latest version of the library, as detailed at the beginning.

I can't find these details. All I see is the reproduction which should be fixed by wrapping the state update in act() as explained by the warning. Unless you're saying my diff doesn't fix the issue in the repro?

[jaspalm]

I have problems with all the tests that are many files with unit and integration tests that have problems due to the latest version of the library, as detailed at the beginning.

I can't find these details. All I see is the reproduction which should be fixed by wrapping the state update in act() as explained by the warning. Unless you're saying my diff doesn't fix the issue in the repro?

The issue we're running into is that now every test in our suite is throwing this error after upgrading when it wasn't before. Is it expected that we have to wrap every state update in act() when we did not before?

[eps1lon]

This was probably a bug that you didn't get those. If you import from @testing-library/react/pure these warnings are disabled. If you import from @testing-library/react/ we enable these warnings.

Though in this specific case I encourage you to keep them enabled since you're clearly missing to wrap state updates in act. If you have other repros where you think every state update is wrapped in act but still get warnings, please share them.

[thepuzzlemaster]

TLDR; I have a repro where I believe every state update is wrapped in act, but still get warnings.

I've been updating my tests to account for places where I previously needed to wrap things in act() but wasn't.

There were a number places where my tests would call element.focus() and jest.advanceTimersByTime(), which trigger state updates, which were now triggering act() warnings.

I've gotten almost all my act warnings to go away by stepping through my code and tracing the state updates back to something like that. Except for a very few remaining warnings, which are all pretty similar.

I've finally found a working somewhat simplified repro (ignore the repo name).

There is one test in MyModule.test.tsx, which is testing some functionality of a custom hook.
Running npm run test runs the test, and should trigger the warning.

I can't for the life of me figure out how to avoid this act warning. As far as I can tell, the thing which triggers the state update (the timer advancing) is already wrapped in an act() function. I've tried just about every possible thing I can think of in both my actual project, and this repro, and can't figure this one out.

Not sure if it's a bug, or I'm just doing something wrong.

[skyqrose]

+1, but I'll add: I'm not just getting warnings, my tests are now failing after the upgrade. So it's not just the verbosity of the warnings that are the problem, it's the changed behavior.

I also noticed that I'm seeing these act warnings on updates I do via @testing-library/user-event.

I do like how testing-library takes care of wrapping its own calls in act in all the obvious places. I don't think expecting callers to wrap all their calls in act now is a good solution. (And if that is the plan, then it's a breaking change that would need to be in the docs.)

[mrdaniellewis]

If I've understood correctly, this is an intended breaking change, possibly due to previous unintended behaviour, and we need wrap all our calls to @testing-library/user-event in act 😞

That is super verbose. Creating an export that does within each project is probably not too hard, but it would be nice to have something that did it out of the box. Or essentially we need a @testing-library/user-event-react.

Or maybe this library could supply such a function, or re-export user-event so its calls are wrapped in act? Is that potentially on the cards?

(None of this true, ignore)

[bpinto]

I've updated the library to version 14.0.0 to fix some act warnings that were being thrown and I'm glad to report that the new release has indeed fixed them.

One shouldn't need to wrap @testing-library/user-event calls with act as that's already done for you.

I'd start with a simple test case and see if you are following all the requirements since recently there was a recent addition of setup on user-event library, or maybe you are also using an old version of react?

I could also be wrong and there might be a bug, but wanted to say that it's working as expected for me without any "missing act" being logged. It's important to see a reproducible scenario where this is happening as otherwise it's possible you are missing something on your tests setup.

[mrdaniellewis]

Thanks for confirming this is not expected. I finally managed to fix the issue on my project by deleting my package-lock.json and node-modules and re-running npm install.

[thepuzzlemaster]

@bpinto, see my comment for a repro of (as far as i can tell), an un-fixable act warning.

[zigang93]

base on this best pratices: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
the post mention that we don't need run cleanup, RTL will handle for us.. but not the case from my side..

I had my custom render setup https://testing-library.com/docs/react-testing-library/setup/#custom-render..
I found out that cleanup maybe not trigger in my @testing-library/react@14.0.0..

after I added cleanup in my global jest setup ( jest.setup.ts ) , my act warnings all gone.. hope someone can try this solution..

// jest.setup.ts
import { cleanup } from '@testing-library/react'

afterEach(() => {
  cleanup
})