当前的测试环境未配置为支持ACT（...） - @testing -library/react

Question

我正在尝试将项目升级为React 18，一切都以DEV和生产模式在浏览器中起作用。但是，在升级到最新版本的@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环境：JSDOR 16.7.0，

但一切看起来都正确吗？

我检查了React 18的迁移文档： 这说明最新版本的@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

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

我正在使用Jestv。27.x和JSDOM，我认为这将是最常见的配置？因此，我很惊讶地遇到这个错误吗？

这是我的笑话

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

。

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

相关 gh问题。

从某种意义上说，警告与测试环境无关，而是由有问题的测试引起的。

除了在我的情况下，除了在前两个答案中已经建议的修复程序外，问题还包括等待 waitfor 调用，这导致所有后续的测试用例都产生警告。

waitFor(...) // ❌ Causes warning.
await waitFor(...) // ✅ Works.

Answer 4

如果测试的代码在测试完成后执行回调，也可能会发生这种情况。例如用户输入上的油门。

可以通过使用完成回调提供的回调通过jest提供或使计时器完成，可以避免使用它。立即使用计时器模拟。

Answer 5

就我而言，问题是ACT（）函数嵌套在ACT（）中：

await act(async () => {
  await someFunction(); // This function also calls act() inside which causes error that OP mentions
  jest.advanceTimersByTime(500);
});

Answer 6

我没有发现全局标志不适合我的原因，所以以下猴子补丁为我解决了日志线

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

，这是超级丑陋的，可能不是解决问题的最佳解决方案，但是又是。

Answer 7

在 package.json 中，添加以下内容：

  "jest": {

    "testEnvironment": "jsdom",

    "globals": {

      "IS_REACT_ACT_ENVIRONMENT": true

    }

  }