chore: inject react-refresh

Author: sheremet-va

packages/vitest/package.json

@@ -83,6 +83,7 @@
   },
   "files": [
     "dist",
+    "setup",
     "bin",
     "*.d.ts",
     "*.d.cts",

packages/vitest/setup/react-refresh.js

@@ -0,0 +1,8 @@
+if (typeof window !== 'undefined') {
+  const { default: RefreshRuntime } = await import('/@react-refresh')
+
+  RefreshRuntime.injectIntoGlobalHook(window)
+  window.$RefreshReg$ = () => {}
+  window.$RefreshSig$ = () => type => type
+  window.__vite_plugin_react_preamble_installed__ = true
+}

packages/vitest/src/node/plugins/commonPluginsHandler.ts

@@ -0,0 +1,29 @@
+import type { Plugin } from 'vite'
+import { resolve } from 'pathe'
+import { hasVitePlugin } from '../../utils/config-helpers'
+import { distDir } from '../../paths'
+
+export function CommonPluginsHandler(): Plugin {
+  return {
+    name: 'vitest:common-plugins-enforcer',
+    enforce: 'post',
+    config: {
+      order: 'post',
+      async handler(config) {
+        const plugins = (config.plugins || [])
+        const hasReact = await hasVitePlugin(plugins, 'vite:react-babel')
+        if (hasReact) {
+          return {
+            test: {
+              deps: {
+                inline: [/vitest\/setup\/react-refresh.js/],
+              },
+              // Since this is an official plugin, it should be OK to inline reac-refresh HRM logic
+              setupFiles: [resolve(distDir, '../setup/react-refresh.js')],
+            },
+          }
+        }
+      },
+    },
+  }
+}

packages/vitest/src/node/plugins/index.ts

@@ -14,6 +14,7 @@ import { GlobalSetupPlugin } from './globalSetup'
 import { CSSEnablerPlugin } from './cssEnabler'
 import { CoverageTransform } from './coverageTransform'
 import { MocksPlugin } from './mocks'
+import { CommonPluginsHandler } from './commonPluginsHandler'
 
 export async function VitestPlugin(options: UserConfig = {}, ctx = new Vitest('test')): Promise<VitePlugin[]> {
   const userConfig = deepMerge({}, options) as UserConfig
@@ -240,6 +241,7 @@ export async function VitestPlugin(options: UserConfig = {}, ctx = new Vitest('t
       ? await UIPlugin()
       : null,
     MocksPlugin(),
+    CommonPluginsHandler(),
   ]
     .filter(notNullish)
 }

packages/vitest/src/node/plugins/workspace.ts

@@ -12,6 +12,7 @@ import { CSSEnablerPlugin } from './cssEnabler'
 import { EnvReplacerPlugin } from './envReplacer'
 import { GlobalSetupPlugin } from './globalSetup'
 import { MocksPlugin } from './mocks'
+import { CommonPluginsHandler } from './commonPluginsHandler'
 
 interface WorkspaceOptions extends UserWorkspaceConfig {
   root?: string
@@ -171,5 +172,6 @@ export function WorkspaceVitestPlugin(project: WorkspaceProject, options: Worksp
     CoverageTransform(project.ctx),
     GlobalSetupPlugin(project, project.ctx.logger),
     MocksPlugin(),
+    CommonPluginsHandler(),
   ]
 }

packages/vitest/src/runtime/execute.ts

@@ -81,6 +81,7 @@ export async function startViteNode(ctx: ContextRPC) {
   })
 
   const environment = await loadEnvironment(ctx.environment.name, executor)
+  ctx.environment.environment = environment
   transformMode = environment.transformMode ?? 'ssr'
 
   const { run } = await import(pathToFileURL(resolve(distDir, 'entry.js')).href)

packages/vitest/src/runtime/loader.ts

@@ -44,13 +44,14 @@ export const resolve: Resolver = async (url, context, next) => {
   const { parentURL } = context
   const state = getWorkerState()
   const resolver = state?.rpc.resolveId
+  const environment = state?.ctx.environment.environment
 
-  if (!parentURL || isNodeBuiltin(url) || !resolver)
+  if (!parentURL || isNodeBuiltin(url) || !resolver || !environment)
     return next(url, context, next)
 
   const id = normalizeModuleId(url)
   const importer = normalizeModuleId(parentURL)
-  const resolved = await resolver(id, importer, state.ctx.environment.name)
+  const resolved = await resolver(id, importer, environment.transformMode ?? 'ssr')
 
   let result: ResolveResult
   let filepath: string

packages/vitest/src/types/rpc.ts

@@ -34,6 +34,7 @@ export interface RunnerRPC {
 
 export interface ContextTestEnvironment {
   name: VitestEnvironment
+  environment?: Environment
   options: EnvironmentOptions | null
 }
 

packages/vitest/src/utils/config-helpers.ts

@@ -1,3 +1,4 @@
+import type { PluginOption } from 'vite'
 import type { BenchmarkBuiltinReporters, BuiltinReporters } from '../node/reporters'
 
 interface PotentialConfig {
@@ -13,3 +14,24 @@ export function getOutputFile(config: PotentialConfig | undefined, reporter: Bui
 
   return config.outputFile[reporter]
 }
+
+async function isVitePlugin(plugin: PluginOption, name: string): Promise<boolean> {
+  if (!plugin)
+    return false
+  if (Array.isArray(plugin))
+    return hasVitePlugin(plugin, name)
+  if (plugin instanceof Promise)
+    return isVitePlugin(await plugin, name)
+  if (typeof plugin === 'object')
+    return plugin.name === name
+  return false
+}
+
+export async function hasVitePlugin(plugins: PluginOption[], name: string): Promise<boolean> {
+  for (const plugin of plugins) {
+    if (await isVitePlugin(plugin, name))
+      return true
+  }
+
+  return false
+}

packages/web-worker/src/utils.ts

@@ -61,14 +61,14 @@ export function createMessageEvent(data: any, transferOrOptions: StructuredSeria
 }
 
 export function getRunnerOptions(): any {
-  const { config, ctx, rpc, mockMap, moduleCache } = getWorkerState()
+  const { config, rpc, mockMap, moduleCache } = getWorkerState()
 
   return {
     fetchModule(id: string) {
-      return rpc.fetch(id, ctx.environment.name)
+      return rpc.fetch(id, 'web')
     },
     resolveId(id: string, importer?: string) {
-      return rpc.resolveId(id, importer, ctx.environment.name)
+      return rpc.resolveId(id, importer, 'web')
     },
     moduleCache,
     mockMap,