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

hkmswyz6 于 2022-12-08 发布在 Jest

关注(0)|答案(3)|浏览(286)

我尝试将我的项目升级到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)

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

react 18.0.0英寸
react-dom 18.0.0个
@testing-library/react版本：“13.1.1”、
测试框架和版本：“笑话”：“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中遇到这个警告？

jestjs

来源：https://stackoverflow.com/questions/72003409/the-current-testing-environment-is-not-configured-to-support-act-testing

3条答案

按热度按时间

pvabu6sv1#

在我的例子中，这是因为我有一个无用的行为，我在v12中实现了一个变通方案。

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

在这个测试中，我删除了Assert周围无用的act，并且解决了关于“环境未配置为支持act”的警告。
在我的例子中，这个特定的测试在升级到v13后失败了，这就是我最终试图清理它的原因。
警告消息基本上对调试此错误没有帮助。

赞(0）回复(0）举报 2022-12-08

ldioqlga2#

我没有找到全局标志不起作用的原因，所以下面的monkey修补程序为我解决了日志行

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做了一些非常相似的东西在他们的代码库。

赞(0）回复(0）举报 2022-12-08

vsnjm48y3#

在我的例子中，出现这个警告是因为我不小心从react-dom/test-utils而不是@testing-library/react导入了act。修复导入后警告消失了。

赞(0）回复(0）举报 2022-12-08