fix(browser): correctly import optimized module in vi.importActual (#6219)

Author: sheremet-va

packages/browser/src/client/tester/mocker.ts

@@ -59,12 +59,19 @@ export class VitestBrowserClientMocker {
       )
     }
     const ext = extname(resolved.id)
-    const url = new URL(`/@id/${resolved.id}`, location.href)
-    const query = `_vitest_original&ext.${ext}`
+    const url = new URL(resolved.url, location.href)
+    const query = `_vitest_original&ext${ext}`
     const actualUrl = `${url.pathname}${
       url.search ? `${url.search}&${query}` : `?${query}`
     }${url.hash}`
-    return getBrowserState().wrapModule(() => import(/* @vite-ignore */ actualUrl))
+    return getBrowserState().wrapModule(() => import(/* @vite-ignore */ actualUrl)).then((mod) => {
+      if (!resolved.optimized || typeof mod.default === 'undefined') {
+        return mod
+      }
+      // vite injects this helper for optimized modules, so we try to follow the same behavior
+      const m = mod.default
+      return m?.__esModule ? m : { ...((typeof m === 'object' && !Array.isArray(m)) || typeof m === 'function' ? m : {}), default: m }
+    })
   }
 
   public async importMock(rawId: string, importer: string) {

packages/browser/src/node/rpc.ts

@@ -1,5 +1,5 @@
 import { existsSync, promises as fs } from 'node:fs'
-import { dirname } from 'pathe'
+import { dirname, isAbsolute, join } from 'pathe'
 import { createBirpc } from 'birpc'
 import { parse, stringify } from 'flatted'
 import type { WebSocket } from 'ws'
@@ -8,11 +8,12 @@ import type { BrowserCommandContext } from 'vitest/node'
 import { createDebugger, isFileServingAllowed } from 'vitest/node'
 import type { WebSocketBrowserEvents, WebSocketBrowserHandlers } from './types'
 import type { BrowserServer } from './server'
-import { resolveMock } from './resolveMock'
+import { cleanUrl, resolveMock } from './resolveMock'
 
 const debug = createDebugger('vitest:browser:api')
 
 const BROWSER_API_PATH = '/__vitest_browser_api__'
+const VALID_ID_PREFIX = '/@id/'
 
 export function setupBrowserRpc(
   server: BrowserServer,
@@ -118,14 +119,44 @@ export function setupBrowserRpc(
           ctx.cancelCurrentRun(reason)
         },
         async resolveId(id, importer) {
-          const result = await project.server.pluginContainer.resolveId(
+          const resolved = await vite.pluginContainer.resolveId(
             id,
             importer,
             {
               ssr: false,
             },
           )
-          return result
+          if (!resolved) {
+            return null
+          }
+          const isOptimized = resolved.id.startsWith(withTrailingSlash(vite.config.cacheDir))
+          let url: string
+          // normalise the URL to be acceptible by the browser
+          // https://github.com/vitejs/vite/blob/e833edf026d495609558fd4fb471cf46809dc369/packages/vite/src/node/plugins/importAnalysis.ts#L335
+          const root = vite.config.root
+          if (resolved.id.startsWith(withTrailingSlash(root))) {
+            url = resolved.id.slice(root.length)
+          }
+          else if (
+            resolved.id !== '/@react-refresh'
+            && isAbsolute(resolved.id)
+            && existsSync(cleanUrl(resolved.id))
+          ) {
+            url = join('/@fs/', resolved.id)
+          }
+          else {
+            url = resolved.id
+          }
+          if (url[0] !== '.' && url[0] !== '/') {
+            url = id.startsWith(VALID_ID_PREFIX)
+              ? id
+              : VALID_ID_PREFIX + id.replace('\0', '__x00__')
+          }
+          return {
+            id: resolved.id,
+            url,
+            optimized: isOptimized,
+          }
         },
         debug(...args) {
           ctx.logger.console.debug(...args)
@@ -242,3 +273,11 @@ export function stringifyReplace(key: string, value: any) {
     return value
   }
 }
+
+function withTrailingSlash(path: string): string {
+  if (path[path.length - 1] !== '/') {
+    return `${path}/`
+  }
+
+  return path
+}

packages/browser/src/node/types.ts

@@ -20,7 +20,7 @@ export interface WebSocketBrowserHandlers {
   resolveId: (
     id: string,
     importer?: string
-  ) => Promise<{ id: string } | null>
+  ) => Promise<{ id: string; url: string; optimized: boolean } | null>
   triggerCommand: <T>(
     contextId: string,
     command: string,

test/browser/fixtures/mocking/import-actual-dep.test.ts

@@ -0,0 +1,14 @@
+import { a, b } from '@vitest/cjs-lib'
+import { expect, test, vi } from 'vitest'
+
+vi.mock(import('@vitest/cjs-lib'), async (importOriginal) => {
+  const original = await importOriginal()
+  return {
+    ...await importOriginal(),
+  }
+})
+
+test('mocking works correctly', () => {
+  expect(a).toBe('a')
+  expect(b).toBe('b')
+})

test/browser/specs/mocking.test.ts

@@ -24,6 +24,7 @@ test.each([true, false])('mocking works correctly - isolated %s', async (isolate
   expect(result.stdout).toContain('import-actual-query.test.ts')
   expect(result.stdout).toContain('import-mock.test.ts')
   expect(result.stdout).toContain('mocked-do-mock-factory.test.ts')
+  expect(result.stdout).toContain('import-actual-dep.test.ts')
   expect(result.exitCode).toBe(0)
 })