React+TypeScript项目用Jest做amcharts单元测试遇到export语法错误如何解决？

你遇到的Unexpected token 'export'错误，是因为@amcharts系列包采用ES Module规范分发，而Jest默认运行在CommonJS环境，且默认配置会跳过所有node_modules下依赖的转译，导致无法识别ESM的export语法。

方案1：调整Jest转译规则 #

修改jest.config.ts中的transformIgnorePatterns配置项，将@amcharts相关包从转译忽略列表中排除，强制babel对其进行转译：

transformIgnorePatterns: [
  "[/\\\\]node_modules[/\\\\](?!@amcharts/).+\\.(js|jsx|mjs|cjs|ts|tsx)$",
  "^.+\\.module\\.(css|sass|scss)$",
],

修改完成后重新运行测试即可正常编译amcharts相关代码。

方案2（更推荐）：Mock amcharts依赖 #

单元测试不需要真实渲染图表，直接Mock amcharts依赖不仅能解决编译报错问题，还能大幅提升测试运行速度，避免图表逻辑干扰业务逻辑验证：
在测试文件顶部添加如下Mock逻辑即可：

// App.test.tsx 顶部添加Mock代码
jest.mock('@amcharts/amcharts4/core', () => ({
  create: jest.fn(() => ({
    series: { push: jest.fn() },
    data: [],
    legend: null
  }))
}))

jest.mock('@amcharts/amcharts4/charts', () => ({
  PieChart: jest.fn(),
  PieSeries: jest.fn(),
  Legend: jest.fn()
}))

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