运行npm test时React组件名称遇Unexpected token错误求助

这问题我之前也碰到过，核心原因就是你的Babel配置没处理React专属的语法，导致测试时无法识别组件相关代码。下面一步步帮你搞定：

问题根源 #

你的.babelrc里只配置了env预设，它只能转译标准ES6+的JavaScript语法，但React组件用到的JSX（比如<MyComponent />）、类组件的语法不在它的处理范围内，所以运行npm test时Babel会抛出"Unexpected token"错误。

解决步骤 #

1. 安装React专属的Babel预设 #

根据你项目的Babel版本选择对应的预设安装：

• 如果你用的是Babel 6（和你的React 16.2版本匹配度更高）：

npm install --save-dev babel-preset-react

• 如果是Babel 7+：

npm install --save-dev @babel/preset-react

2. 更新.babelrc配置 #

把React预设添加到配置里，让Babel能识别React语法：

Babel 6版本配置：

{
  "presets": ["env", "react"]
}

Babel 7+版本配置：

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

3. 确保测试环境的转译规则（针对Jest） #

如果你的测试用例是用Jest运行的，还要确保转译配置正确：

• 先安装babel-jest（Babel 6用babel-jest，Babel 7用@babel/jest）：

npm install --save-dev babel-jest

• 在package.json里添加Jest的转译配置：

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

4. 重新运行测试 #

完成以上配置后，再执行npm test，这个Unexpected token的问题应该就能解决了。

如果还是有问题，可以检查下你的React组件文件是不是.jsx后缀，或者确认Jest的配置里包含了.jsx文件的转译规则。

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