The current testing environment is not configured to support act(...) with React 18 & Jest

[MarkLyck]

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?

It is my understanding that with React 18.x and RTL 13.x that this warning should be handled within RTL?

[eps1lon]

Could you provide a cloneable repro so that we can take a look. Without knowing the dependency tree, source, tests etc it's hard to judge what the issue is.

[MarkLyck]

@eps1lon I didn't have any luck making a seperate repo to reproduce.

But I did discover some additional weirdness and "solve" it I think?

The warning about act, ONLY showed up for me when I ran this 1 particular test, and only when I ran that test only. (If I ran all tests, the test would fail but it would not show the warnings related to "act".

In RTL v12, I had to implement a hacky workaround to make my test pass like this:

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

I could never figure out why RTL failed my test without this in v12. But I tried removing the act wrapper around my assertion in RTL 13, and suddenly not only did my test pass as I expected it to do in V12, but the warning about missing act wrapper are completely gone now.

I have no clue why removing what should be a useless act() would fix an error about the current environment not being configured to support act? (I have many other tests that use act so it's not like it was related to only 1 instance of act in my test 🤷

It seems like there's definitely some weirdness and possibly an obscure bug somewhere? But sadly I haven't managed to reproduce it (although I only tried building the simplest case with the same jest config)

[eps1lon]

It's probably due to fewer or more microtasks being queued. And this way some update sometimes run within the proper context and sometimes outside of it.

Instead of starting from scratch, use the full repo that's reproducing and start removing code until it no longer reproduces.

[dar5hak]

The warning also shows up when using vitest as opposed to jest, although none of my tests fail.

I'm not using act() directly anywhere.

[eps1lon]

@dar5hak Please open a separate issue for that following the template.

[stuarthallows]

I've created a repo that reproduces the error that's logged when running the tests. The repro uses vite and vitest but the error is the same - Warning: The current testing environment is not configured to support act(...)

[MarkLyck]

@dar5hak @stuarthallows Interestingly enough I just tried to switch to vitest as well on the same project I ran into this error on before I solved it and I am having the same issue again as well.

Although this time it's obviously not due to 1 strange test, so it's very likely unrelated to this issue.

We should create a new issue for using testing-library-react with vitest.

[MarkLyck]

@stuarthallows I created a new issue for the vitest specific problem: #1061

And posted your reproduction repo. Hopefully some one will see it 🤞

[eps1lon]

@MarkLyck Did you have any luck reproducing this with Jest?

[Poky85]

In my case it was caused by an extra act() wrapped around fireEvent, e.g.

act(() => {
  fireEvent.change(root.getByLabelText('Name'), {
    target: { value: 'George' },
  });
});

Fixed by removing act().

fireEvent.change(root.getByLabelText('Name'), {
  target: { value: 'George' },
});

FYI @MarkLyck