TypeScript项目用Jest测试React组件报Unexpected token错误如何解决

问题根因 #

你遇到的报错核心是两个配置缺失：

1. 未配置JSX语法的转换规则，<Button />这类React组件语法无法被Jest识别转换
2. Jest默认测试环境为Node，缺少React组件渲染需要的浏览器DOM环境

修复步骤 #

1. 修改babel.config.js，新增React预设 #

在现有presets数组中加入@babel/preset-react，用于处理JSX语法转换：

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

2. 修改tsconfig.json，新增JSX编译配置 #

在compilerOptions中添加对应React版本的JSX编译规则，React 17+推荐使用react-jsx，更低版本使用react：

{
  "compilerOptions": {
    "types": ["jest"],
    "jsx": "react-jsx"
  },
  "include": ["src/**/*", "**/*.test.ts", "**/*.test.tsx"],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "**/*.spec.tsx"
  ]
}

3. 优化jest.config.js配置 #

新增浏览器测试环境，修正transform的匹配冲突，开启ts-jest的babel兼容：

module.exports = {
  roots: ["<rootDir>/src"],
  preset: "ts-jest",
  // 新增浏览器测试环境，Jest 27+需要单独安装jest-environment-jsdom依赖
  testEnvironment: "jsdom",
  testMatch: [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)",
  ],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
    "^.+\\.js$": "babel-jest",
  },
  transformIgnorePatterns: ["node_modules/"], // 若需转换node_modules下指定@autofiy相关包，可保留原有规则
  globals: {
    "ts-jest": {
      babelConfig: true
    }
  }
};

如果运行时提示找不到jest-environment-jsdom，执行以下命令安装即可：
npm i jest-environment-jsdom -D

4. 可选检查（适配低版本React） #

如果你使用的是React 16及更早版本，需要在所有.tsx文件（包括测试文件）的顶部引入React：
import React from 'react'

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