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

这个错误我之前在React 15 + TypeScript的项目里也碰到过，核心原因就是Jest没有正确配置来转译TSX文件中的JSX语法——毕竟你的测试文件是普通JS，但组件是TSX写的，Jest默认不知道怎么处理<开头的JSX标签。下面是我亲测有效的解决方案，分两种配置路径（Babel转译或ts-jest转译），你可以根据自己的项目情况选择：

方案一：用Babel转译TSX（适配Jest 21的Babel 6生态） #

1. 安装必要依赖 #

先把Babel相关的转译包装全，匹配Jest 21的版本：

npm install --save-dev babel-jest babel-preset-react babel-preset-typescript@1.x

如果用Yarn的话：

yarn add --dev babel-jest babel-preset-react babel-preset-typescript@1.x

2. 配置Babel #

在项目根目录创建或修改.babelrc文件，加入React和TypeScript预设：

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

3. 调整Jest配置（package.json中的jest字段） #

确保Jest能识别TSX文件，并使用babel-jest转译它们：

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

4. 确认Enzyme适配器配置 #

React 15需要对应版本的Enzyme适配器，先安装：

npm install --save-dev enzyme-adapter-react-15

然后在setupTests.js里完成配置：

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-15');

Enzyme.configure({ adapter: new Adapter() });

方案二：用ts-jest直接转译TypeScript（适合TS原生特性需求高的项目） #

如果你的项目依赖TypeScript的原生特性，Babel的TS预设支持有限，推荐用ts-jest：

1. 安装依赖 #

npm install --save-dev ts-jest @types/jest @types/enzyme @types/enzyme-adapter-react-15

2. 调整Jest配置 #

修改package.json里的jest字段：

"jest": {
  "moduleFileExtensions": ["ts", "tsx", "js", "jsx"],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  "setupFiles": ["./setupTests.js"],
  "globals": {
    "ts-jest": {
      "tsConfig": "tsconfig.json"
    }
  }
}

同时确保tsconfig.json中jsx选项设置为"react"，保证TSX文件能被正确转译。

3. 同步Enzyme适配器配置 #

和方案一的第4步一致，确保setupTests.js里配置了正确的适配器。

最后验证测试文件写法 #

比如你的测试文件（如MyComponent.test.js）要正确导入TSX组件：

import MyComponent from '../src/MyComponent.tsx';
import { shallow } from 'enzyme';

test('组件渲染正常', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.exists()).toBe(true);
});

做完这些配置后，重新跑测试应该就能解决Unexpected token <的问题了——本质就是让Jest能正确解析TSX里的JSX语法，不再把<当成未知符号。

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