React Typescript项目Jest遇到意外token错误该如何修复？

问题根因 #

当前配置存在两个核心冲突：

• Babel 7 与 Babel 6 的扩展运算符处理插件混用：依赖中同时安装了 Babel 7 版的@babel/plugin-proposal-object-rest-spread和 Babel 6 版的babel-plugin-transform-object-rest-spread，且 Babel 配置中使用的是已废弃的 Babel 6 版插件名transform-object-rest-spread，导致转译规则不生效
• Jest 运行时未正确触发 Babel 转译：当前 Jest 配置未指定转译器，测试运行时直接读取源码，未经过扩展运算符的语法转换

具体修复方案 #

第一步：清理冲突依赖，统一使用 Babel 7 生态插件 #

卸载废弃的 Babel 6 插件：

npm uninstall babel-plugin-transform-object-rest-spread babel-plugin-transform-class-properties @babel/preset-es2015 babel-preset-es2015

@babel/preset-env 已经内置了对象扩展运算符的转译支持，不需要单独安装额外插件。

第二步：修正 Babel 配置 #

更新 Babel 配置文件内容如下：

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

移除原配置中的transform-object-rest-spread插件配置，由@babel/preset-env默认处理扩展运算符转译。

第三步：补充 Jest 转译配置 #

在 Jest 配置中添加transform字段，指定用 babel-jest 转译源码：

"jest": {
  "verbose": true,
  "collectCoverage": true,
  "runner": "@jest-runner/electron",
  "testEnvironment": "@jest-runner/electron/environment",
  "transform": {
    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
  },
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|svg|yaml)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
  },
  "modulePaths": [
    "<rootDir>/src/",
    "node_modules"
  ]
}

如果没有安装babel-jest，先执行安装：

npm install babel-jest@^26.0.0 --save-dev

安装的版本需要和本地 Jest 的大版本保持一致，避免兼容性问题。

第四步：验证修复 #

删除node_modules和锁文件（package-lock.json/yarn.lock）后重新安装依赖，再运行 Jest 测试即可。

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