React项目Jest测试时导入d3报Unexpected token 'export'错误

问题根因 #

这个报错的根因是新版D3完全采用ES Module(ESM)语法编写，而Create React App内置的Jest测试环境默认配置为：仅转换项目src目录下的代码，不对node_modules下的依赖包做语法转换。Jest默认运行在CommonJS环境下，无法识别ESM的export语法，因此导入d3时触发报错。浏览器运行正常是因为Webpack会自动将ESM语法转换为浏览器兼容的格式，和测试环境规则不同。

解决方案 #

方案1：配置转换规则允许转译D3相关依赖 #

如果你的测试需要用到D3的真实逻辑，修改配置让Babel转译D3相关代码即可。

• 未eject的CRA项目：直接在package.json中新增Jest配置项

{
  "name": "你的项目名",
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(d3.*)/)"
    ]
  }
}

• 已eject或自定义Jest配置的项目：找到你的Jest配置文件（通常是jest.config.js），添加同样的transformIgnorePatterns配置即可。

方案2：Mock D3依赖（更推荐单元测试场景） #

如果你的单元测试不需要验证D3的渲染逻辑，只需要测试组件其他逻辑，可以直接Mock D3包，避免转译依赖的开销：

1. 在项目src目录下新建__mocks__/d3.js文件
2. 写入自定义Mock内容，示例：

// 基础空Mock，不会触发导入错误
export default {}
// 也可以根据你用到的API手动编写Mock，比如模拟选择器方法
export const select = jest.fn(() => ({
  append: jest.fn().mockReturnThis(),
  attr: jest.fn().mockReturnThis(),
  style: jest.fn().mockReturnThis()
}))

配置完成后重新运行react-scripts test即可正常执行测试。

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