React项目配置Jest遇JSX实验语法未启用错误求助

我正尝试为我的React应用配置Jest，但遇到如下错误：

Jest遇到意外令牌
...
当前未启用对实验性语法'jsx'的支持 (5:10):

我查阅了诸多相关解答，但尝试后均未解决问题。以下是我的配置文件：

babel.config.js #

module.exports = {
  presets:[
      "@babel/preset-env",
      "@babel/preset-react"
  ]
}

jest.config.js #

module.exports = {
    collectCoverage: true,
    collectCoverageFrom: ['src/**/*.{js,jsx}'],
    coverageDirectory: 'coverage',
    testEnvironment: 'jsdom',
    transform: {
        '\\.[jt]sx?$': 'esbuild-jest',
      },
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}

package.json（相关片段） #

{
  ...
  "dependencies": {
    "@testing-library/user-event": "^13.5.0",
    "babel-jest": "^29.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-textfit": "^1.1.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "coverage": "jest --coverage",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "eslint-plugin-jest": "^27.2.1",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0"
  }
}

问题根源 #

你的jest.config.js里配置了用esbuild-jest转换JS/JSX文件，但当前esbuild未正确处理JSX语法；同时你虽已配置Babel的React预设，但未让Jest使用Babel执行转换。

解决方案 #

两种修复方式任选其一：

方式一：改用Babel处理转换（推荐，适配已有的Babel配置）

修改jest.config.js中的transform配置，替换为babel-jest：

module.exports = {
    collectCoverage: true,
    collectCoverageFrom: ['src/**/*.{js,jsx}'],
    coverageDirectory: 'coverage',
    testEnvironment: 'jsdom',
    transform: {
        '\\.[jt]sx?$': 'babel-jest',
    },
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}

你已在package.json中安装了babel-jest及必要Babel预设，无需额外安装依赖。

方式二：配置esbuild支持JSX

若想继续使用esbuild-jest，需为其添加JSX处理配置，修改jest.config.js的transform部分：

module.exports = {
    collectCoverage: true,
    collectCoverageFrom: ['src/**/*.{js,jsx}'],
    coverageDirectory: 'coverage',
    testEnvironment: 'jsdom',
    transform: {
        '\\.[jt]sx?$': ['esbuild-jest', {
          jsx: 'automatic', // React 17+ 推荐用automatic，旧版本可设为'react'
          jsxFactory: 'React.createElement',
          jsxFragment: 'React.Fragment'
        }],
    },
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}

若未安装esbuild，执行npm install esbuild --save-dev补充依赖。

额外检查项 #

1. 确保测试文件后缀为.test.jsx或.spec.jsx，保证Jest能正确识别。
2. 若使用React 17+，可在babel.config.js中显式开启自动JSX运行时，避免手动导入React：

module.exports = {
  presets:[
      "@babel/preset-env",
      ["@babel/preset-react", { runtime: "automatic" }]
  ]
}

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