玩笑 使用 d3 时出现意外的令牌“导出”

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";

我尝试更新我的笑话配置的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'

演示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