React单元测试用例在Vite环境中无法执行问题求助

第一步：确认测试依赖已安装 #

首先确保你已安装Vitest及React测试所需核心依赖，执行以下命令：

yarn add -D vitest @testing-library/react @testing-library/jest-dom jsdom

第二步：完善Vite配置中的Test选项 #

在vite.config.ts中添加test配置块，指定测试环境为jsdom（模拟浏览器环境），同时继承resolve别名配置，确保测试时能正确解析@src路径：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgrPlugin from "vite-plugin-svgr";
import envCompatible from 'vite-plugin-env-compatible';
import path from "path";

export default defineConfig({
  build: {
    outDir: "build",
  },
  resolve: {
    alias: {
        "@src": path.resolve(__dirname, "src"),
    }
  },
  envPrefix: 'REACT_APP_',
  plugins: [
    react(),
    envCompatible(),
    svgrPlugin({
      svgrOptions: {
        icon: true,
      },
    }),
  ],
  // 添加测试配置
  test: {
    environment: 'jsdom',
    globals: true, // 可选：无需手动导入describe/test/expect等全局测试方法
    // 继承resolve别名，确保测试文件能识别@src路径
    resolve: {
      alias: {
        "@src": path.resolve(__dirname, "src"),
      }
    }
  }
});

第三步：检查测试文件命名与结构 #

确保测试文件符合Vitest默认识别规则：

• 文件名以.test.tsx/.test.ts结尾
• 或放置在__tests__目录下

第四步：常见排查点 #

如果依然无法启动，根据终端报错信息针对性排查：

• 若提示模块找不到：确认test.resolve中的别名配置是否与主配置一致
• 若提示浏览器API不存在：确认test.environment已设置为jsdom
• 若出现依赖冲突：删除node_modules和yarn.lock后重新执行yarn install

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