Jest运行React单元测试提示不支持实验性JSX语法如何解决

你遇到的JSX语法不支持报错核心来自两个冲突点：

• Jest转换规则配置错误：你在jest配置中把.js/.jsx文件的转换器指定为jest-esm-transformer，这个工具仅处理ESM模块导入语法，不会执行Babel的JSX编译逻辑，导致JSX语法无法被识别。
• Babel版本不兼容：项目依赖的核心Babel包是babel-core@6.x（Babel6版本），但你安装的@babel/preset-react、@babel/plugin-syntax-jsx都是Babel7生态的包，新旧版本不兼容导致Babel配置完全不生效。

步骤1：调整Jest转换规则 #

修改package.json中jest.transform字段，将.js/.jsx的转换器改为babel-jest，如果仍需要处理ESM语法，可通过Babel插件完成，无需单独使用jest-esm-transformer：

"transform": {
  "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
  "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
  "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
}

同时删除extensionsToTreatAsEsm配置，避免和CommonJS格式的Babel编译结果冲突。

步骤2：统一Babel版本 #

执行以下命令安装兼容的Babel7全家桶，替换旧版本Babel依赖：

npm uninstall babel-core babel-jest babel-loader babel-preset-react-app
npm install -D @babel/core@7 @babel/preset-env@7 @babel/preset-react@7 babel-jest@26 babel-loader@8

如果你不想改动原项目的生产构建Babel配置，也可以临时安装版本桥接包：

npm install -D babel-core@npm:@babel/core@7

步骤3：调整Babel配置 #

修改package.json中的babel字段，删除冗余配置，补充JSX转换所需参数：

"babel": {
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

如果原项目生产构建依赖旧的react-app预设，可在Babel配置中增加环境判断，仅测试环境加载新预设：

"babel": {
  "env": {
    "test": {
      "presets": [
        ["@babel/preset-env", { "targets": { "node": "current" } }],
        ["@babel/preset-react", { "runtime": "automatic" }]
      ]
    },
    "production": {
      "presets": ["react-app"]
    },
    "development": {
      "presets": ["react-app"]
    }
  }
}

步骤4：清理缓存重启测试 #

执行以下命令清除所有缓存后重新运行测试：

npx jest --clearCache
rm -rf node_modules package-lock.json
npm install
npm run test

内容的提问来源于stack exchange，提问作者A-Der