如何解决Vite+Jest项目中JSX语法支持未启用的问题

1. 安装所需依赖 #

首先安装Jest及相关转译、测试库：

npm install --save-dev jest @jest/globals babel-jest @babel/preset-env @babel/preset-react @testing-library/react @testing-library/jest-dom

2. 配置Babel #

在项目根目录创建babel.config.json，用于转译JSX和ESM语法：

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

• @babel/preset-env：根据当前Node版本转译JS语法，确保Jest能识别
• @babel/preset-react：处理JSX语法，runtime:automatic对应React 17+的自动引入规则，和Vite默认配置一致

3. 配置Jest #

如果项目package.json中设置了"type": "module"（Vite默认启用ESM），需创建jest.config.cjs（采用CommonJS格式，避免Jest识别ESM时出错）：

module.exports = {
  testEnvironment: "jsdom", // 模拟浏览器DOM环境，适配React组件测试
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest" // 用babel-jest转译所有js/jsx文件
  },
  moduleFileExtensions: ["js", "jsx"],
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"] // 全局引入jest-dom断言匹配器
};

4. 全局测试配置 #

在src目录下创建setupTests.js，全局注册@testing-library/jest-dom的断言匹配器：

import "@testing-library/jest-dom";

5. 添加测试命令 #

在package.json的scripts中添加测试脚本：

"scripts": {
  "test": "jest"
}

错误原因说明 #

• 「Support for the experimental syntax 'jsx' isn't currently enabled」：Jest默认无法解析JSX，必须通过@babel/preset-react转译处理
• 「Cannot use import statement outside a module」：Vite默认启用ESM，但Jest对ESM的支持仍需配合CommonJS格式的配置文件（如jest.config.cjs），同时通过Babel将ESM转译为Jest能识别的CommonJS代码

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