使用Jest测试React应用遇SyntaxError: Unexpected token export错误求助

我之前也碰到过一模一样的问题！这个报错本质是Jest遇到了未被转译的ES模块语法（比如export），而DeckGL（或它的依赖）发布的是ES模块版本，Jest默认会跳过node_modules目录的代码转译，所以就识别不了这些语法了。下面是具体的解决步骤：

1. 修改Jest的transformIgnorePatterns配置 #

你需要告诉Jest不要忽略DeckGL及其相关依赖的转译，在你的Jest配置文件（比如jest.config.js）或者package.json的jest字段里添加以下配置：

// jest.config.js示例
module.exports = {
  // 你的其他Jest配置...
  transformIgnorePatterns: [
    // 排除deck.gl、@deck.gl开头的包，还有它常用的依赖mapbox-gl
    'node_modules/(?!(deck.gl|@deck.gl|mapbox-gl|@mapbox)/)'
  ]
};

如果是在package.json里配置：

{
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(deck.gl|@deck.gl|mapbox-gl|@mapbox)/)"
    ]
  }
}

2. 确认Babel配置正确 #

确保你的.babelrc或babel.config.js里包含了必要的预设，能正确转译React和ES模块语法：

// .babelrc示例
{
  "presets": [
    "@babel/preset-react", // 处理React JSX
    ["@babel/preset-env", { "targets": { "node": "current" } }] // 针对当前Node版本转译ES语法
  ]
}

这里preset-env指定node: current是因为Jest运行在Node环境下，确保转译后的代码能被Node识别。

3. 如果你用Create React App（CRA） #

CRA的默认Jest配置会限制transformIgnorePatterns，你可以直接在package.json的jest字段里覆盖，注意要保留CRA默认的CSS模块忽略规则：

{
  "jest": {
    "transformIgnorePatterns": [
      "^.+\\.module\\.(css|sass|scss)$",
      "node_modules/(?!(deck.gl|@deck.gl)/)"
    ]
  }
}

如果这样不行，也可以用react-app-rewired来修改底层配置，但优先尝试上面的方法。

额外检查点 #

• 确保你已经安装了所有必要的Babel依赖：@babel/core、@babel/preset-react、@babel/preset-env、babel-jest这些都要装全。
• 如果还是报错，检查DeckGL的版本，某些旧版本可能有特殊的转译需求，尝试升级到最新稳定版看看。

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