当前测试环境未配置为支持 act(...) - @testing-library/react

Question

我正在尝试将我的项目升级到 React 18，一切都可以在浏览器中的开发和生产模式下运行。但是升级到最新版本后，@testing-library/react我的一些单元测试失败了，其中很多都记录了以下警告：

  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)

我做的第一件事是检查我的版本，清除节点模块并锁定文件以防万一：

• react18.0.0
• react-dom18.0.0
• @testing-library/react版本：“13.1.1”，
• 测试框架和版本：“jest”：“27.5.1”，
• DOM环境：jsdom 16.7.0

但一切看起来都不错吗？

我检查了 React 18 的迁移文档：https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html 其中说最新版本@testing-library/react不需要globalThis.IS_REACT_ACT_ENVIRONMENT = true设置。

但无论如何，我在测试运行之前尝试手动设置。但这也没有解决它，（我尝试了几个版本）

// @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

这些都没有修复警告或单元测试。

我正在使用 jest v.27.x 和 jsdom，我认为这是最常见的配置？所以我很惊讶遇到这个错误？

这是我的 jest.config

  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)

您知道为什么像这样相对简单的设置会在 RTL v. 13.1.1 中遇到此警告吗？

Answer 1

就我而言，出现此警告是因为我不小心从而不是act导入react-dom/test-utils了@testing-library/react。修复导入使警告消失。

Answer 2

就我而言，发生这种情况是因为我在 v12 中实施了一个无用的行为作为解决方法。

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

我在此测试中删除了围绕我的断言的无用行为，并且有关“环境未配置为支持行为”的警告已解决。

就我而言，这个特定的测试在升级到 v13 后失败了，这就是我最终尝试清理它的方式。

警告消息对于调试来说基本上没有帮助。