使用Vitest测试React组件时遇React refresh preamble加载错误求助

问题原因 #

该错误由Vitest测试环境与React热刷新（React Refresh）机制冲突导致：@vitejs/plugin-react-swc 默认在所有环境（包括测试环境）启用热刷新功能，但测试场景不需要热刷新，多余的热刷新预加载代码触发了报错。

解决方法 #

1. 配置React插件在测试环境禁用热刷新 #

修改 vite.config.ts 中的React插件配置，针对测试环境关闭热刷新或排除测试文件：

/// <reference types="vitest" />
/// <reference types="vite/client" />

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

export default defineConfig({
  plugins: [
    react({
      // 方案1：排除所有测试文件，不对其启用热刷新
      exclude: /\.test\.tsx?$/,
      // 方案2：仅非测试环境启用热刷新
      reactRefresh: process.env.NODE_ENV !== 'test'
    })
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './setupTest.ts'
  }
})

2. 检查并清理测试初始化文件 #

确认 setupTest.ts 中没有引入任何热刷新相关代码，仅保留测试必要配置（如引入@testing-library/jest-dom）：

示例 setupTest.ts：

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

3. 确保依赖版本兼容 #

若上述方法无效，尝试更新相关依赖到兼容版本：

npm update vitest @vitejs/plugin-react-swc jsdom @testing-library/react

验证测试 #

修改配置后，重新运行测试命令（如npm test），测试组件渲染逻辑即可正常执行。

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