SyntaxError：在 Jest 中使用具有 amcharts4 的组件运行测试时出现意外的令牌导出

Question

Geeting 错误：在 Jest 中使用具有 amcharts4 的组件运行测试时出现意外的令牌导出

 export { System, system } from "./.internal/core/System";
    ^^^^^^

    SyntaxError: Unexpected token export

    > 1 | import * as am4core from "@amcharts/amcharts4/core";
        | ^
      2 | import * as am4charts from "@amcharts/amcharts4/charts";
      3 | import * as am4maps from "@amcharts/amcharts4/maps";
      4 | import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";

“开玩笑”：“24.9.0”
"@amcharts/amcharts4": "^4.10.19"
“打字稿”：“^3.9.5”

以下是 package.json 文件中的 jest 配置：（对项目使用 create-react-app 并弹出它）

"jest": {
    "roots": [
      "<rootDir>/src"
    ],
    
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom",
      "<rootDir>\\src\\__mocks__\\dom.js",
      "<rootDir>\\src\\__mocks__\\reactrouter.js"
    ],
    "setupFilesAfterEnv": [
      "@testing-library/jest-dom/extend-expect"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!@amcharts/amcharts4/)",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [
      "<rootDir>/src/",
      "<rootDir>/node_modules/"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
}

Answer 1

原因： babel-jest 使用根据要转换的文件的位置加载的 babel 配置。弹出 create-react-app 后，您的 package.json 可能包含：

"babel": {
  "presets": [
    "react-app"
  ]
}

这使得导入/导出语句适用于您的文件，但 @amcharts/amcharts4 在其 package.json 中没有该设置，也没有 .babelrc，因此不会发生导入/导出转换。

解决方案：您可以更新您的 Jest 配置，以更具体的方式转换 @amcharts：

1. 添加相关babel插件：npm install -D @babel/plugin-transform-modules-commonjs
2. 更新 package.json 中的 jest 配置 - 将 @amcharts 转换重定向到自定义转换器。 （我还更改了 transformIgnorePatterns 以便它们适用于 Windows。）

"transform": {
  "@amcharts[/\\\\].+\\.(js|jsx|ts|tsx)$": "<rootDir>/config/jest/babelTransformImportExport.js",
  "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
  "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
  "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
  "node_modules[/\\\\](?!@amcharts[/\\\\]amcharts4[/\\\\])",
  "^.+\\.module\\.(css|sass|scss)$"
],

1. 创建config/jest/babelTransformImportExport.js:

const babelJest = require("babel-jest");

module.exports = babelJest.createTransformer({
  plugins: [require.resolve("@babel/plugin-transform-modules-commonjs")],
  babelrc: false,
  configFile: false,
});

现在应该正在运行测试。

编辑： 正如 Subrato Patnaik 提到的 (using amcharts with jest)，amcharts 使用了 Jest 测试环境中尚不可用的 API，例如 SVGPathElement（JSDOM - 问题 #2128）。换句话说，如果您使用标准安装，您的测试可能无法正常工作。但是如果您使用例如，它们可能可以工作。 enzyme 及其浅层渲染。

如果你不使用酶或者它不起作用，那么作为最后的手段，你可以尝试以简约的方式简单地定义缺失的 API，看看是否足够：

1. 将 jest 配置中的 setupFiles 更改为：

"setupFiles": [
  "react-app-polyfill/jsdom",
  "<rootDir>/config/jest/setup.js"
],

1. 创建config/jest/setup.js:

class SVGGraphicsElement extends SVGElement {}
class SVGGeometryElement extends SVGGraphicsElement {}
class SVGPathElement extends SVGGeometryElement {}

Object.assign(global, {
  SVGGraphicsElement,
  SVGGeometryElement,
  SVGPathElement,
});

PS：如果您使用的是 pnpm 而不是 npm/yarn，那么您需要将 transformIgnorePatterns 更新为：

"node_modules[/\\\\](?!(|\\.pnpm[/\\\\]@amcharts.*node_modules[/\\\\])@amcharts[/\\\\]amcharts4[/\\\\])",

否则旧的正则表达式将匹配（并因此忽略）路径，例如node_modules/.pnpm/@amcharts+amcharts4@4.10.21/node_modules/@amcharts/amcharts4/core.js