开玩笑使用 d3 时意外的令牌“导出”答案

【问题标题】：Jest Unexpected token 'export' when using d3开玩笑使用 d3 时意外的令牌“导出”
【发布时间】：2021-11-12 12:41:19
【问题描述】：

我已经阅读了许多与我类似的问题，但似乎没有一个可以解决我的问题。我正在使用 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",
  },
};

【问题讨论】：

标签： vue.js d3.js jestjs vuejs3 ts-jest

【解决方案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

【讨论】：