使用 d3 时 Jest 意外令牌 'export'

Question

我已经阅读了很多与我类似的问题，但 none 似乎解决了我的问题。我正在使用 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",
  },
};

Answer 1

快速修复是使用缩小的 d3 构建，它已经被转译。要么直接导入缩小版本：

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

demo 1

或者使用 Jest 配置将 d3 映射到缩小版本：

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

demo 2

如果这不是一个选项，您可以将 Jest 配置为转译 d3（及其也需要转译的依赖项：internmap、delaunator 和 robust-predicates） :

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

注意：转译为测试增加了相当多的时间运行。

demo 3

使用 d3 时 Jest 意外令牌 'export'

Jest Unexpected token 'export' when using d3

d3.js

vue.js

jestjs

ts-jest

vuejs3