The current testing environment is not configured to support act(...) - @testing-library/react

Question

I'm trying to upgrade my project to React 18, everything works in dev and production mode in the browser. But after upgrading to the latest version of @testing-library/react some of my unit tests are failing and a lot of them are logging the following warning:

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

      at printWarning (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at isConcurrentActEnvironment (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25057:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:27351:12)
      at scheduleUpdateOnFiber (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25292:5)
      at setLoading (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:17342:16)
      at _callee2$ (node_modules/.pnpm/@[email protected][email protected]/node_modules/@cubejs-client/react/src/hooks/cube-query.js:56:7)

First thing I did was check my versions, cleared node modules and lock file just in case:

• react 18.0.0
• react-dom 18.0.0
• @testing-library/react version: "13.1.1",
• Testing Framework and version: "jest": "27.5.1",
• DOM Environment: jsdom 16.7.0

But everything looks right?

I checked the migration docs for React 18: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html Which says the latest version of @testing-library/react shouldn't require the globalThis.IS_REACT_ACT_ENVIRONMENT = true setting.

But I tried setting that manually anyway before my tests run. But that didn't fix it either, (I tried several versions)

// @ts-ignore
global.IS_REACT_ACT_ENVIRONMENT = true
// @ts-ignore
globalThis.IS_REACT_ACT_ENVIRONMENT = true
// @ts-ignore
self.IS_REACT_ACT_ENVIRONMENT = true
// @ts-ignore
window.IS_REACT_ACT_ENVIRONMENT = true
// @ts-ignore
this.IS_REACT_ACT_ENVIRONMENT = true

None of those fixes the Warning or the unit tests.

I'm using jest v. 27.x with jsdom which I imagine would be the most common configuration? So I'm quite surprised to be running into this error?

Here is my jest.config

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\.(t|j)sx?$': ['ts-jest'],
  },
  setupFilesAfterEnv: ['./src/setupTests.tsx'],
  modulePathIgnorePatterns: ['src/common/config.ts'],
  coverageReporters: ['text', 'json'],
}

Any ideas why a relatively simple setup like this, would be running into this warning with RTL v. 13.1.1?

Villous

Answer 1

In my case this warning was appearing because I had accidentally imported act from react-dom/test-utils instead of @testing-library/react. Fixing the import made the warning disappear.

Behnken

Yes, I replaced to @testing-library/react and it is working. But, in React documentation, that is exactly what they are doing, import { act } from 'react-dom/test-utils'; : reactjs.org/docs/test-utils.html#act They might need to update that page – Sigman

I have the same warning, with one type of import, or another. I am spending the whole day against these warnings... – Croy

act is deprecated in @testing-library/react. – Perbunan

Answer 2

In my case this happened because I had a useless act that I implemented as a workaround in v12.

await act(async () => {
      const hours = await screen.findByText('-6h')
      expect(hours).toBeInTheDocument()
    })

I removed the useless act around my assertion in this test, and the warning about the "environment not configured to support act" was resolved.

In my case, this particular test was failing after upgrading to v13, which is how I ended up trying to clean it up.

The warning message was essentially not helpful in debugging this.

Villous

Answer 3

It can also happen if the tested code has a timeout that executes a callback after the test has finished. For instance with a throttle on a user input.

It can be avoided either by using the done callback provided by jest or by making the timers to finish instantly with the timer mocks.

Winkelman

Answer 4

Relevant GH issue.

The warning is misleading in a sense that it has nothing to do with the testing environment but is rather caused by a problematic test.

In addition to the fixes already suggested in the top 2 answers, in my case, the problem was in a forgotten await for waitFor call which caused all the subsequent test cases to produce the warning.

waitFor(...) // ❌ Causes warning.
await waitFor(...) // ✅ Works.

Battledore

Answer 5

I didn't find the reason why the global flag was not working for me, so the following monkey patch resolved the log lines for me

const originalConsoleError = console.error;
console.error = (...args) => {
  const firstArg = args[0];
  if (
    typeof args[0] === 'string' &&
    (args[0].startsWith(
      "Warning: It looks like you're using the wrong act()"
    ) ||
      firstArg.startsWith(
        'Warning: The current testing environment is not configured to support act'
      ) ||
      firstArg.startsWith('Warning: You seem to have overlapping act() calls'))
  ) {
    return;
  }
  originalConsoleError.apply(console, args);
};

Yes, it's super ugly and likely not the best solution to the problem, but then again React does something pretty similar in their codebase.

Stephie

Answer 6

in package.json, add this:

  "jest": {

    "testEnvironment": "jsdom",

    "globals": {

      "IS_REACT_ACT_ENVIRONMENT": true

    }

  }

Resolutive