测试TSX文件时Jest报SyntaxError: Unexpected token '<'错误求助

错误根源 #

这个问题出在JSX语法未被正确转译：@babel/preset-typescript仅处理TypeScript语法，不负责解析JSX；同时当前Jest和Babel配置缺少对.tsx文件的JSX转译规则，导致测试运行时无法识别<div />这类JSX语法。

修复步骤 #

1. 安装React Babel预设 #

首先添加处理JSX的Babel依赖：

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

2. 更新babel.config.js #

将@babel/preset-react加入预设数组，注意放在@babel/preset-typescript之前（转译顺序有要求）：

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-react", // 新增该行
    "@babel/preset-typescript",
  ],
};

3. 补充Jest的转译规则 #

当前jest.config.js缺少对.ts/tsx文件的转译配置，添加transform项告诉Jest用Babel处理TypeScript文件：

module.exports = {
  transformIgnorePatterns: ["node_modules/(?!axios)/"],
  moduleNameMapper: {
    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less)$": "<rootDir>/__mocks__/fileMock.js",
  },
  // 新增转译配置
  transform: {
    "^.+\\.(ts|tsx)$": "babel-jest",
  },
  clearMocks: true,
  collectCoverage: false,
  coverageDirectory: "coverage",
  testEnvironment: "jsdom",
  setupFiles: ["<rootDir>/__mocks__/jestSetup.js"],
  watchman: true,
};

4. 检查tsconfig.json的JSX配置 #

确保TypeScript编译器能正确识别JSX，在tsconfig.json中设置：

{
  "compilerOptions": {
    "jsx": "react-jsx" // React 17+推荐使用该值，旧版本可设为"react"
  }
}

5. 确认测试文件扩展名 #

保证测试文件使用.test.tsx或.spec.tsx扩展名，Jest会自动匹配这类文件并应用转译规则。

验证修复 #

重新执行测试命令：

npm test

此时JSX语法会被正确转译，错误即可消除。

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