React 17 出现意外的令牌“导出”

Question

我正在使用 Jest 和 React 为我的项目编写具有以下规格的单元测试用例。当我运行纱线测试（Jest --coverage）时。它给了我以下错误。

Error: Test suite failed to run

    Jest encountered an unexpected token.....

    Details:

    <root dir>/node_modules/cheerio/dist/browser/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { contains, merge } from './static.js';
                                                                                      ^^^^^^
    SyntaxError: Unexpected token 'export'

      3 | import { configure } from 'enzyme';
      4 |
    > 5 | global.ResizeObserver = jest.fn().mockImplementation(() => ({
        |                                                  ^
      6 |     observe: jest.fn(),
      7 |     unobserve: jest.fn(),
      8 |     disconnect: jest.fn(),

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (node_modules/enzyme/build/Utils.js:93:16)
      at Object.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:33:14)
      at Object.<anonymous> (node_modules/enzyme/build/index.js:3:21)
      at Object.<anonymous> (node_modules/@wojtekmaj/enzyme-adapter-react-17/build/ReactSeventeenAdapter.js:11:15)
      at Object.<anonymous> (node_modules/@wojtekmaj/enzyme-adapter-react-17/build/index.js:3:18)
      at Object.<anonymous> (test/setup.js:5:50)

我的 Jest 和 Babel 版本分别是 29.7.0 和 7.24.0。

这是我的 Jest.config.js 文件。

module.exports = {
  testEnvironment: 'jsdom',
  setupFiles: ["./test/setup.js"],
  testURL: "http://localhost/",
  moduleNameMapper: {
    "^.+\\.(less|css)$": "babel-jest",
  },
  transformIgnorePatterns: [
    "/node_modules/?!(cheerio|jest-runtime|enzyme|@wojtekmaj)"
  ],
  testTimeout: 30000,
};

这是我的 setup.js 文件：

import 'raf/polyfill';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import { configure } from 'enzyme';

global.ResizeObserver = jest.fn().mockImplementation(() => ({
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn(),
}))

global.CSS = {
    escape: (str) => str,
};

configure({
    adapter: new Adapter(),
});

我尝试了多种在线解决方案来调整transformIgnorePattern字段的正则表达式，但没有成功。请建议在此处使用正确的正则表达式来消除此错误或任何其他需要的内容。

Answer 1

我以前也遇到过类似的错误，所以这是我的想法：

很好，你有

ResizeObserver

嘲笑 并且 它在你的

setupFiles

中（经常忘记将它添加到那里）。但你可以尝试以下方法：

1. 我会将正则表达式更新为如下所示：

   node_modules\/(?!(${moduleNames.join('|')})\/)

   ，然后传入模块名称。请注意这个正则表达式如何转义第一个前向/斜杠，而你的还没有。

const modulesToMap = (modules) => `node_modules\/(?!(${modules.join('|')})\/)`;

const modules = ['cheerio','jest-runtime','enzyme','@wojtekmaj'];

所以你的

transformIgnorePatterns

将是：

module.exports = {
...
  transformIgnorePatterns: [modulesToMap(modules)],
}

2. 尝试将

   window

   定义也添加到您的模拟文件中？ 🤔 我对 Jest 有类似的嘲笑，但对

   IntersectionObserver

   来说。但正如您在下面看到的，我的文件包含

   window

   和

   global

   定义。确切的语法并不重要（例如，使用类，就像我所做的那样），但尝试定义

   window

   和

   global

   并看看 Jest 是否对此更满意

// src/mocks/intersectionObserverMock.js

// Mock IntersectionObserver
class IntersectionObserver {
  observe = jest.fn();
  disconnect = jest.fn();
  unobserve = jest.fn();
}

Object.defineProperty(window, 'IntersectionObserver', {
  writable: true,
  configurable: true,
  value: IntersectionObserver,
});

Object.defineProperty(global, 'IntersectionObserver', {
  writable: true,
  configurable: true,
  value: IntersectionObserver,
});

3. 最后，在你的

   jest.config.js

   （确保这是一个小写的“J”顺便说一句）中，也许尝试调整你的模拟文件的导入语法？所以，而不是

   ./setup.js

   我的

   setupFiles

   在

   jest.config.js

   中看起来像这样：

setupFiles: ['<rootDir>/src/test/mocks/localStorage.mock.js', '<rootDir>/src/__mocks__/intersectionObserverMock.js'],