Warning: The current testing environment is not configured to support act(...)

[viveleroi]

After updating from v15 to v16 of testing-library/react, I'm now getting this error in all of my tests - except the tests still pass just fine.

Warning: The current testing environment is not configured to support act(...)

The error goes away when I downgrade to v15. Since @testing-library/dom is now a peer dep, I tried installing that as well but the error remains.

• @testing-library/react version: 16
• Testing Framework and version: vitest, @testing-library/jest
• DOM Environment: jsdom 23.2.0, and I've tried upgrading this too. no change

With v15, here's what yarn why says (no warnings about act):

yarn why @testing-library/dom
├─ @storybook/testing-library@npm:0.1.0
│  └─ @testing-library/dom@npm:8.20.1 (via npm:^8.3.0)
│
├─ @testing-library/react@npm:15.0.7
│  └─ @testing-library/dom@npm:10.1.0 (via npm:^10.0.0)
│
└─ @testing-library/react@npm:15.0.7 [7cdc2]
   └─ @testing-library/dom@npm:10.1.0 (via npm:^10.0.0)

In 16 with dom added, here's what why says (warnings on act):

├─ @storybook/testing-library@npm:0.1.0
│  └─ @testing-library/dom@npm:8.20.1 (via npm:^8.3.0)
│
└─ tatsu@workspace:.
   └─ @testing-library/dom@npm:10.1.0 (via npm:^10.1.0)

[MatanBobi]

I'm not sure why you didn't get the above before, but this should be resolved by using yarn resolutions and enforcing the same version for DTL. The reason this is probably happening to you is because you still have multiple version of DTL installed due to @storybook/testing-library installing an older version of DTL.

[viveleroi]

Sadly that didn't help, at least with v10. testing-library/react v15 works for now. Maybe the issue isn't the dom library, but something else with v16? All I have to do to fix this is downgrade to v15.0,7.

yarn why @testing-library/dom
├─ @storybook/test@npm:8.1.10
│  └─ @testing-library/dom@npm:10.1.0 (via npm:^10.1.0)
│
└─ tatsu@workspace:.
   └─ @testing-library/dom@npm:10.1.0 (via npm:^10.1.0)

[ryanlelek]

Chiming in with this issue also and some info. Using npm (fresh install, no lockfile).

Works fine. Current solution is to use this while we investigate

"@testing-library/dom": "9.3.4"
"@testing-library/react": "15.0.7",

All of these combinations have the issue

# Upgrade "react" one like OP
"@testing-library/dom": "9.3.4"
"@testing-library/react": "16.0.0",

# Latest of both packages
"@testing-library/dom": "10.1.0"
"@testing-library/react": "16.0.0",

# Upgrading "dom" but staying on v15.x
"@testing-library/dom": "10.1.0"
"@testing-library/react": "15.0.7",

Also using vitest like OP but not @testing-library/jest Instead @testing-library/jest-dom (not my repo so idk if it matters)

"@testing-library/jest-dom": "6.4.6",
"vitest": "1.6.0"

Most other dependencies are up-to-date, except for eslint+ ffmpeg (unrelated) Output of npm outdated

@ffmpeg/ffmpeg           0.11.6  0.11.6  0.12.10  node_modules/@ffmpeg/ffmpeg          react-audio-recorder
=> @testing-library/dom      9.3.4   9.3.4   10.1.0  node_modules/@testing-library/dom    react-audio-recorder
=> @testing-library/react   15.0.7  15.0.7   16.0.0  node_modules/@testing-library/react  react-audio-recorder
eslint                   8.57.0  8.57.0    9.5.0  node_modules/eslint                  react-audio-recorder
eslint-config-prettier   8.10.0  8.10.0    9.1.0  node_modules/eslint-config-prettier  react-audio-recorder

Link to repo if you want an example (branch: dependencies) https://github.com/ryanlelek/react-audio-recorder/tree/dependencies

# Relevant commands
npm run test;
npm run build;

[MatanBobi]

@viveleroi Can you please provide a reproduction for this one so we'll be able to investigate? You can use https://testing-library.com/new-rtl

@ryanlelek The issue you're experiencing isn't related to the version of testing library AFAIU. A few things I saw in your tests:

1. You don't need to wrap any interaction with act, this is done for you as long as you're using @testing-library/react.
2. After removing all of the await act you had there, the only test that triggers the error is you're last test. Refactoring it this way removes the error:

  test("AudioRecorder timer works properly", async () => {
    const user = userEvent.setup();
    const onRecordingComplete = vi.fn();
    render(<AudioRecorder onRecordingComplete={onRecordingComplete} />);
    const audioRecorder: HTMLElement = screen.getByTestId("audio_recorder");
    const audioRecorderMic: HTMLElement = screen.getByTestId("ar_mic");
    await user.click(audioRecorderMic);
    expect(audioRecorder).toHaveClass("recording");
    const audioRecorderTimer: HTMLElement = screen.getByTestId("ar_timer");
    expect(audioRecorder).toHaveClass("recording"); // should still be recording after pause
    await waitFor(() => {
      expect(audioRecorderTimer.textContent).toEqual("0:01"); // timer should have gone to 1 sec
    });

    await user.click(audioRecorderMic);
    expect(audioRecorder.classList.contains("recording")).toBeFalsy();
    expect(onRecordingComplete).toHaveBeenCalled();
    expect(getTracks).toHaveBeenCalled();
    expect(stop).toHaveBeenCalled();
  });

Btw, I highly recommend not waiting 1 second in your tests and use fake timers instead.

[OlaoluwaM]

One solution has been removing the flagged act calls

[whoisahmed]

Anyway to fix this other than sticking to v15 pls?

[MatanBobi]

@whoisahmed We'll need a reproduction to understand what you're experiencing.

[R-Sandor]

Anyway to fix this other than sticking to v15 pls?

I just learned that I don't need act everywhere on the latest version and I am very happy. But a little aggravated given I added it everywhere to appease the framework because I used to get an error saying I need it before :upside_down_face:

But a huge win for my other project where we ignored the error about needing to wrap it in Act :rofl: