Webpack 4项目中使用Jest报‘Jest encountered an unexpected token’错误求助

看起来你遇到的核心问题是Jest无法处理ES模块的import/export语法，虽然配置了.babelrc但没生效，大概率是依赖版本不兼容或者必要包缺失导致的。下面是一步步的解决方案：

1. 安装Jest兼容的Babel依赖 #

首先，确保你安装了新版的Babel核心包和预设（旧版babel-preset-*已经被@babel命名空间的包取代，和新版Jest兼容性更好）：

npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react

2. 更新你的.babelrc配置 #

替换原来的配置内容，确保测试环境能正确转译ES模块和React语法：

{
  "presets": [
    "@babel/preset-react",
    ["@babel/preset-env", { "modules": false }]
  ],
  "env": {
    "test": {
      "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
      ]
    }
  }
}

• @babel/preset-react负责转译React的JSX语法
• 测试环境下@babel/preset-env会自动把ES模块转为Jest能识别的CommonJS格式

3. 给Jest明确转译规则 #

在package.json中添加Jest配置项，确保它用babel-jest处理你的JS/JSX文件：

"jest": {
  "transform": {
    "^.+\\.(js|jsx)$": "babel-jest"
  },
  "moduleFileExtensions": ["js", "jsx"]
}

4. 排除Webpack配置的干扰 #

你的Webpack在开发环境下排除了ClientApp/scripts目录的转译，但Jest默认只会忽略node_modules目录，所以你的业务代码会被正常转译，不需要额外调整Webpack配置。

完成以上步骤后，重新运行npm run test，应该就能正常处理import语法，顺利通过你的Sum函数测试了。

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