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

“@testing-library/jest-dom”: “5.16.4”, “@testing-library/react”: “13.1.1”, DOM Environment: jsdom or happy-dom (happens with both)

Problem description:

After upgrading to @testing-library/react@13.x and react@18.x with vitest. A lot of react tests throw the following warning:

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

I noticed this after switching from jest to vitest, and not changing anything else. (The tests do not show this warning when using jest, but they they show it when using vitest in the same project).

I previously had an unrelated issue causing the same warning with Jest: https://github.com/testing-library/react-testing-library/issues/1057

I resolved that, by removing a bad implementation of act(). However this time the tests are identical, and works with 1 test-runner and not with another.

Reproduction:

Credit to @stuarthallows for creating a repo that reproduces the problem: https://github.com/stuarthallows/vitest-error

@stuarthallows and @dar5hak also both seem to be having the same problem as me (see my other issue here: https://github.com/testing-library/react-testing-library/issues/1057 for more details).

Additional information.

In my case, this is breaking unit tests completely because it logs thousands of these warnings and it just stops after around 10 tests are completed.

For me a lot of the errors start with rc-motion

Warning: The current testing environment is not configured to support act(...)
    at Align (/Users/marklyck/colony/colony-frontend/node_modules/.pnpm/rc-align@4.0.12_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/rc-align/lib/Align.js:45:23)
    at DomWrapper (/Users/marklyck/colony/colony-frontend/node_modules/.pnpm/rc-motion@2.5.1_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/rc-motion/lib/DomWrapper.js:28:34)
    at /Users/marklyck/colony/colony-frontend/node_modules/.pnpm/rc-motion@2.5.1_ef5jwxihqo6n7gxfmzogljlgcm/node_modules/rc-motion/lib/CSSMotion.js:57:32

Which is probably running an animation with antd components. But I’m 99% sure that’s a red-herring since the same tests and components work just fine with jest. (or testing-library/react@12 and react@17)

[airjp73]

The workaround doesn’t totally work for me. The initial error The current testing environment is not configured... to support act(...) goes away, but then I get act warnings I wouldn’t have otherwise.

I’ve made a reproduction here: https://github.com/airjp73/vitest-act-reproduction

Worth noting that this also appears to be exclusive to React 18. If you downgrade everything to React 17 (including downgrading this library to v12), the act warnings go away and you also don’t need to override the global anymore.

[nknapp]

I raised a similar issue at vitest. But they think (and I kind of agree), that it has to be solved in testing-library.

tldr; of my vitest-issue:

• when testing-library/react resolves IS_REACT_ACT_ENVIRONMENT it uses the first existing of self, window and global as global-object, which in may case is self
• react access IS_REACT_ACT_ENVIRONMENT directly, which is probably globalThis or global link.
• in vitest / jsdom, globalThis and self are not the same object.

The fix

I think the fix is to add

if (typeof globalThis !== 'undefined') {
  return globalThis
}

here: https://github.com/testing-library/react-testing-library/blob/c8c93f83228a68a270583c139972e79b1812b7d3/src/act-compat.js#L5-L28.

The workaround

The workaround is define some kind of proxy-property on global this, that will make sure that self and globalThis have the same value of IS_REACT_ACT_ENVIRONMENT the code in setupFile.ts:

Object.defineProperty(globalThis,"IS_REACT_ACT_ENVIRONMENT", {
  get() {
    if (typeof globalThis.self !== 'undefined') {
      return globalThis.self.IS_REACT_ACT_ENVIRONMENT
    }
  },
  set(value) {
    if (typeof globalThis.self !== 'undefined') {
      globalThis.self.IS_REACT_ACT_ENVIRONMENT = value
    }
  }
})

globalThis.IS_REACT_ACT_ENVIRONMENT = true