当前测试环境未配置为支持 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/[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)

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

• react

  18.0.0

• react-dom

  18.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

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'],
}

知道为什么像这样相对简单的设置会在 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 后失败了，这就是我最终尝试清理它的方式。

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

Answer 3

我没有找到全局标志对我不起作用的原因，所以下面的猴子补丁为我解决了日志行

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);
};

是的，它非常丑陋，可能不是解决问题的最佳方法，但话又说回来React 在他们的代码库中做了一些非常相似的事情。

Answer 4

如果测试代码有超时，在测试完成后执行回调，也会发生这种情况。例如，对用户输入进行限制。

可以通过使用 jest 提供的 done 回调 或使用 timer mocks 使计时器立即完成来避免。

Answer 5

在

package.json

中，添加：

  "jest": {

    "testEnvironment": "jsdom",

    "globals": {

      "IS_REACT_ACT_ENVIRONMENT": true

    }

  }