Angular结合D3运行Jest测试用例报Unexpected token错误如何解决？

问题根因 #

D3及其子依赖均采用ES Module规范发布，Jest默认配置会跳过转换node_modules目录下的所有文件，无法识别ES Module的export语法，因此抛出 unexpected token 语法错误。

配置修改步骤 #

1. 调整jest.config.js核心配置 #

修改你项目根目录下的jest.config.js文件，重点调整transformIgnorePatterns字段，取消对D3相关包的转换忽略：

module.exports = {
  // 保留你原有配置的预设、环境、测试文件匹配等配置不变
  preset: 'jest-preset-angular',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],

  // 新增/修改以下配置
  transformIgnorePatterns: [
    'node_modules/(?!.*\\.mjs$|d3|d3-.*)'
  ],
  transform: {
    '^.+\\.(ts|js|html)$': 'jest-preset-angular'
  }
};

配置说明：transformIgnorePatterns中的反向匹配规则，表示node_modules下只有后缀为.mjs的文件、d3主包、所有d3-开头的子包，需要走Jest的转换流程，其余包依然保持忽略转换的默认逻辑，不影响其他依赖的加载速度。

2. 依赖版本校验 #

请确保以下依赖版本匹配，避免版本兼容性问题：

• jest-preset-angular大版本和Angular项目大版本对齐，例如Angular 14对应v11.x、Angular 15对应v12.x、Angular 16+对应v13.x+
• Jest版本≥28，D3版本≥7
• 已安装@types/jest、ts-jest配套类型依赖

3. 兜底适配方案 #

如果修改上述配置后依然存在语法报错，可以新增模块映射规则，直接指向D3包已经编译好的UMD产物，无需额外转换：

module.exports = {
  // 其余配置保持不变
  moduleNameMapper: {
    // 新增d3相关包的映射规则
    '^d3$': '<rootDir>/node_modules/d3/dist/d3.min.js',
    '^d3-(.*)$': '<rootDir>/node_modules/d3-$1/dist/d3-$1.min.js'
  }
};

内容的提问来源于stack exchange，提问作者Naresh Renukuntla