使用Enzyme测试React组件遇Unexpected token <错误求助

这个错误我之前也碰到过，问题出在JSX语法没被Babel正确转译，另外你的测试代码还有个小语法问题，我来帮你一步步解决：

1. 先修复测试代码里的语法错误 #

你写的expect语句有个括号位置错误，正确的写法应该是：

test('should say hello',() => {
  const loginPage = shallow(<LoginPage />)
  // 把.toBe(true)移到contains的括号外面
  expect(loginPage.contains('Hello')).toBe(true)
})

2. 解决JSX转译失败的核心问题 #

出现Unexpected token是因为Jest运行测试时，无法识别<LoginPage />这种JSX语法，需要配置Babel来转译测试文件中的React代码：

步骤1：安装必要的Babel依赖 #

打开终端，安装@babel/preset-react和babel-jest（如果还没安装的话）：

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

步骤2：配置Babel转译规则 #

在项目根目录创建或修改.babelrc（或者babel.config.js）文件，添加React和ES6+的转译预设：

{
  "presets": [
    "@babel/preset-env", // 转译ES6+语法
    "@babel/preset-react" // 转译JSX语法
  ]
}

步骤3：确保Jest使用Babel转译 #

如果你的项目有自定义的Jest配置（比如jest.config.js或者package.json里的jest字段），确认已经设置了正确的transform规则：

// package.json中的示例配置
{
  "jest": {
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest"
    }
  }
}

做完这些配置后，重新运行测试，应该就能正常识别JSX语法了。

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