Jest运行测试时TSX使用可选链报Unexpected token错误

你给Jest配置的全量转译流程是用babel-jest处理所有ts/tsx/js/jsx文件，但当前项目的Babel配置没有开启对可选链（?.）语法的解析与转译能力。
Babel默认仅支持内置语法集合内的特性，可选链属于需要明确配置才能识别的新ECMAScript特性。你之前已经配好了JSX的转译规则，所以所有JSX用例可以正常跑，但TSX里出现的?.会在Babel解析阶段被判定为非法token，直接抛Unexpected token错误，和JSX的运行逻辑没有任何冲突。

注意：这个问题的根源不在Jest本身，哪怕你把Jest配置里的文件匹配规则写得完全正确，只要底层转译层（Babel或TS编译器）不认可选链语法，就一定会报错，调整Node版本、Jest运行环境这类操作是没法解决问题的。

结合你当前混用JSX/TSX的技术栈，选下面任意一种配置就能正常跑测试：

方案1：沿用现有babel-jest流程修改配置 #

1. 先检查项目依赖版本：
   • 如果用的是Babel 7.8及以上版本，内置的@babel/preset-env已经集成了可选链的转译能力，不需要额外装插件；如果Babel版本低于7.8，需要补装@babel/plugin-proposal-optional-chaining依赖。
2. 修改项目根目录的Babel配置（一般是babel.config.js或.babelrc），注意Babel的预设是从数组尾部向前执行的，顺序错了直接报token错误，参考可运行的配置：

   module.exports = {
     presets: [
       // 这个预设在数组最前面，会最后执行，优先加载所有现代JS语法的解析能力
       [
         '@babel/preset-env',
         {
           // 匹配Jest运行时的当前Node环境，避免生成多余的兼容代码拖慢测试速度
           targets: { node: 'current' }
         }
       ],
       '@babel/preset-react', // 负责解析JSX语法
       '@babel/preset-typescript' // 负责解析TS/TSX语法
     ],
     // 低版本Babel需要加这个插件，高版本可以删掉
     plugins: ['@babel/plugin-proposal-optional-chaining']
   }
   

3. 避坑提醒：别把@babel/preset-typescript放在preset数组最开头，不然TS解析逻辑会先跑，这时候还没加载可选链的解析规则，碰到?.直接抛错。

方案2：拆分转译规则用ts-jest处理TS文件 #

如果项目已经配好了TypeScript的编译规则，这种方式配置更简单，也不用维护Babel和TS双套转译规则：

1. 安装ts-jest依赖。
2. 修改Jest配置里的transform规则，把TS/TSX文件的转译逻辑从babel-jest里拆出来：

   "transform": {
     "^.+\\.(js|jsx)$": "babel-jest",
     "^.+\\.(ts|tsx)$": "ts-jest"
   }
   

3. 检查项目tsconfig.json的编译选项：要么把target设为ES2019及以上版本，要么在compilerOptions里显式开"optionalChaining": true，TS编译器会自动把可选链语法转成当前Node能识别的代码，不会再触发Babel的token解析错误。

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