迁移至Create React App后Jest测试遭遇意外Token错误

嘿，我刚处理过类似的CRA迁移问题，Jest报意外Token错误在这种场景下真的挺常见的，给你几个实用的排查和解决方向：

1. 排查未被CRA默认处理的语法或文件类型 #

CRA自带的Jest配置是预设好的，如果你原来的项目用了一些它默认不支持的语法，或者引入了Jest无法解析的特殊文件，就会触发这个错误：

• 装饰器语法：如果你的代码用了装饰器（比如@observer这类），CRA默认不开启，需要额外配置Babel：
  在package.json中添加Babel配置：

  "babel": {
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ],
    "presets": ["react-app"]
  }
  

  别忘了先安装依赖：npm install --save-dev @babel/plugin-proposal-decorators

• 特殊文件导入：比如直接把SVG当作组件导入（而非当作资源URL），Jest默认无法解析这类文件，需要添加mock：

  1. 在package.json的Jest配置里添加模块映射：

     "jest": {
       "moduleNameMapper": {
         "\\.svg$": "<rootDir>/src/__mocks__/svgMock.js"
       }
     }
     

  2. 在src/__mocks__目录下创建svgMock.js：

     module.exports = 'svg-mock-component';
     

  其他类似文件（比如.scss、.vue）也可以用类似的方式处理。

2. 解决依赖冲突问题 #

迁移后很容易残留旧Webpack项目的依赖，和CRA内置的Jest、Babel版本冲突：

• 先删除node_modules、package-lock.json（或yarn.lock），然后重新执行npm install清空依赖缓存。
• 检查package.json里的devDependencies，如果有手动安装的jest、babel-jest、@jest/*这类包，直接移除它们——CRA已经内置了适配好的版本，不需要单独安装。

3. 检查测试文件的导入和语法 #

迁移后文件结构可能有变化，或者测试代码用了CRA不兼容的语法：

• 逐一检查报错的测试文件，确认所有导入路径都是正确的相对路径，没有引用不存在的文件。
• 如果用了动态导入（import()）或者其他较新的ESNext语法，确认react-app的Babel预设已经支持（大部分常用语法都覆盖了，如果有特殊需求可以补充Babel插件）。

4. 最后处理快照更新 #

等Jest的意外Token错误解决后，再运行npm test -- --updateSnapshot就能批量更新所有快照了，这时候快照失败的问题就搞定了。

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