使用d3时，Jest报错Unexpected token 'export'。

Question

我已经阅读了很多类似于我的问题，但没有一种方法可以解决我的问题。我正在使用Vue3、TypeScript、Jest和D3 v7。当我尝试导入import * as d3 from "d3";时，在我的测试中出现以下错误：

({"Object.<anonymous>":
  function(module,exports,require,__dirname,__filename,global,jest)
  {export * from "d3-array";

这个错误也会在我这样导入d3时发生: import { BaseType, Selection, Transition, select } from "d3"; 我尝试更新我的jest配置文件的transformIgnorePatterns属性，但这也不起作用:

transformIgnorePatterns: [
  "<rootDir>/node_modules/(?!d3-(array))",
]

有人能解释一下我这里缺少的部分吗？以下是我的整个jest.config.js文件：

module.exports = {
  collectCoverageFrom: [
    "**/src/**.ts", 
    "**/src/**/**.ts", 
    "!**/dist/**", 
    "!**/node_modules/**", 
    "!**/public/**"
  ],
  errorOnDeprecated: true,
  preset: "@vue/cli-plugin-unit-jest/presets/typescript",
  testMatch: ["**/*.spec.ts", "!**/node_modules/**"],
  testPathIgnorePatterns: ["<rootDir>/dist/", "<rootDir>/node_modules/"],
  "modulePaths": [
    "<rootDir>"
  ],
  transformIgnorePatterns: [
    "<rootDir>/node_modules/(?!d3-(array))",
  ],
  transform: {
    "^.+\\.ts": "ts-jest",
    "^.+\\.vue$": "vue-jest",
  },
};

- Rafael

Answer 1

一种快速解决方法是使用压缩后的 d3 版本，该版本已经转换过了。可以直接导入这个被压缩的版本：

import * as d3 from 'd3/dist/d3.min'

示例 1

或者使用 Jest 配置将 d3 映射到最小化构建版本：

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '^d3$': '<rootDir>/node_modules/d3/dist/d3.min.js',
  },
}

演示2

如果无法使用前一种方法，您可以配置Jest转译d3（以及需要转译的其依赖项：internmap，delaunator和robust-predicates）：

// jest.config.js
module.exports = {
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!d3|internmap|delaunator|robust-predicates)'
  ],
}

注意：转译会大大增加测试运行的时间。

演示 3

- tony19

---

对于使用CRA的用户：请将以下内容添加到package.json文件中： "jest": { "moduleNameMapper": { "^d3$": "<rootDir>/node_modules/d3/dist/d3.min.js" }。 - rodvlopes

这个在使用SWC编译器的Next.js中非常有效（在配置Jest以使用Babel转译文件不可行的情况下）。谢谢！ - Dr. Derek Austin

对于最新的nivo（0.83.0），我在d3-colors中遇到了这个错误。这是我的修复方法：'d3-colors': '<rootDir>/node_modules/d3-colors/dist/d3-colors.min.js'。 - undefined

Answer 2

根据Tiep Phan的回答，我在我的package.json文件中添加了以下内容：

"jest": {
    "transformIgnorePatterns": ["/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"] },

- kshitij Bhatnagar