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/[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?

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.

[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

[eps1lon]

Closing since no reproduction has been provided for over a month. Note that calling act manually is expected to trigger these warnings since we only provide the proper test environment for our API calls.