React+TypeScript+Jest组件测试报错：Unexpected token '<' 求助

这个错误的核心原因是Jest未正确转译TSX文件中的JSX语法，结合你的配置来看，主要有两处问题需要修正：

1. 修正Jest的转译配置 #

你的jest.config.js中transform仅针对.ts文件，未包含.tsx，导致TSX里的JSX标签无法被处理。修改transform字段：

module.exports = {
  // ...其他配置
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest', // 同时匹配ts和tsx文件
  }
};

2. 调整TypeScript的JSX编译设置 #

你的tsconfig.json中jsx设为preserve，该选项会保留JSX语法不转译，而Jest运行时需要转译后的JS代码。将jsx改为react-jsx（React 17+推荐）或react：

{
  "compilerOptions": {
    // ...其他配置
    "jsx": "react-jsx",
    // ...其他配置
  }
}

如果不想修改全局tsconfig.json，可单独创建tsconfig.test.json用于测试环境：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "exclude": ["**/node_modules"] // 不要排除测试文件
}

然后在jest.config.js中指定该配置：

module.exports = {
  // ...其他配置
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.test.json'
    }
  }
};

验证修改 #

重新运行测试命令：

npm run test

此时Jest会正确转译TSX文件中的JSX语法，组件测试应该可以正常执行了。

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