使用Vite+Vitest时提示JSX实验语法未启用的问题求助

核心问题 #

你的Vitest配置未集成Vite的React编译插件，导致无法解析TSX文件中的JSX语法。

解决方案步骤 #

1. 更新Vitest配置，集成React插件 #

修改vitest.config.ts，导入Vite的React插件并添加到配置中，让Vitest复用Vite的React编译能力：

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()], // 引入React编译插件
  test: {
    include: ['**/*.test.tsx'],
    environment: 'jsdom' // 必须添加，React测试依赖DOM环境
  },
})

2. 确保TypeScript配置正确 #

检查项目根目录的tsconfig.json，确保JSX相关配置符合React版本要求（React 17+推荐使用react-jsx）：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true
  }
}

3. 移除冗余测试框架依赖（可选但推荐） #

你同时安装了Jest、Mocha和Vitest，三者都是测试框架，会造成依赖冗余甚至冲突。保留Vitest即可，执行以下命令清理多余依赖：

npm uninstall jest mocha @types/jest

4. 修正测试代码的断言错误 #

你的测试代码中expect(text).toBe(true)存在逻辑错误：screen.getByText返回DOM元素，应断言元素存在而非等于布尔值。修改为：

expect(text).toBeInTheDocument();

使用该断言需先安装@testing-library/jest-dom：

npm install -D @testing-library/jest-dom

然后在测试文件或全局setup.ts中导入：

import '@testing-library/jest-dom'

验证 #

重新运行测试命令，即可正常解析JSX并执行测试。

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