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?

Answer 1

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.