20

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/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at isConcurrentActEnvironment (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:25057:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:27351:12)
      at scheduleUpdateOnFiber (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:25292:5)
      at setLoading (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:17342:16)
      at _callee2$ (node_modules/.pnpm/@cubejs-client+react@0.29.51_react@18.0.0/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?

MLyck
  • 4,959
  • 13
  • 43
  • 74

5 Answers5

18

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.

Ingirorhaun
  • 381
  • 4
  • 6
  • 1
    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';` : https://reactjs.org/docs/test-utils.html#act They might need to update that page – maufarinelli Jan 06 '23 at 19:56
12

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.

MLyck
  • 4,959
  • 13
  • 43
  • 74
0

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 by either using the done callback provided by jest or to make the timers to finish instantly with the timer mocks.

challet
  • 870
  • 9
  • 21
-1

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.

Lukas Bach
  • 3,559
  • 2
  • 27
  • 31
-1

in package.json, add this:

  "jest": {

    "testEnvironment": "jsdom",

    "globals": {

      "IS_REACT_ACT_ENVIRONMENT": true

    }

  }
Wing Bui
  • 1
  • 1