feat: use providers request interception for module mocking (#7576)

Author: sheremet-va

packages/browser/package.json

@@ -93,7 +93,6 @@
     "@vitest/mocker": "workspace:*",
     "@vitest/utils": "workspace:*",
     "magic-string": "catalog:",
-    "msw": "catalog:",
     "sirv": "catalog:",
     "tinyrainbow": "catalog:",
     "ws": "catalog:"

packages/browser/src/client/client.ts

@@ -1,3 +1,4 @@
+import type { ModuleMocker } from '@vitest/mocker/browser'
 import type { CancelReason } from '@vitest/runner'
 import type { BirpcReturn } from 'birpc'
 import type { WebSocketBrowserEvents, WebSocketBrowserHandlers } from '../node/types'
@@ -65,6 +66,21 @@ function createClient() {
         }
         cdp.emit(event, payload)
       },
+      async resolveManualMock(url: string) {
+        // @ts-expect-error not typed global API
+        const mocker = globalThis.__vitest_mocker__ as ModuleMocker | undefined
+        const responseId = getBrowserState().sessionId
+        if (!mocker) {
+          return { url, keys: [], responseId }
+        }
+        const exports = await mocker.resolveFactoryModule(url)
+        const keys = Object.keys(exports)
+        return {
+          url,
+          keys,
+          responseId,
+        }
+      },
     },
     {
       post: msg => ctx.ws.send(msg),

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

@@ -0,0 +1,24 @@
+import type { ModuleMockerInterceptor } from '@vitest/mocker/browser'
+import type { BrowserRPC } from '../client'
+import { getBrowserState, getWorkerState } from '../utils'
+
+export function createModuleMockerInterceptor(): ModuleMockerInterceptor {
+  return {
+    async register(module) {
+      const state = getBrowserState()
+      await rpc().registerMock(state.sessionId, module.toJSON())
+    },
+    async delete(id) {
+      const state = getBrowserState()
+      await rpc().unregisterMock(state.sessionId, id)
+    },
+    async invalidate() {
+      const state = getBrowserState()
+      await rpc().clearMocks(state.sessionId)
+    },
+  }
+}
+
+export function rpc(): BrowserRPC {
+  return getWorkerState().rpc as any as BrowserRPC
+}

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

@@ -12,7 +12,7 @@ import { executor, getBrowserState, getConfig, getWorkerState } from '../utils'
 import { setupDialogsSpy } from './dialog'
 import { setupConsoleLogSpy } from './logger'
 import { VitestBrowserClientMocker } from './mocker'
-import { createModuleMockerInterceptor } from './msw'
+import { createModuleMockerInterceptor } from './mocker-interceptor'
 import { createSafeRpc } from './rpc'
 import { browserHashMap, initiateRunner } from './runner'
 import { CommandsManager } from './utils'
@@ -43,7 +43,6 @@ async function prepareTestEnvironment(files: string[]) {
 
   getBrowserState().commands = new CommandsManager()
 
-  // TODO: expose `worker`
   const interceptor = createModuleMockerInterceptor()
   const mocker = new VitestBrowserClientMocker(
     interceptor,

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

@@ -1,5 +1,7 @@
 import type { Plugin } from 'vitest/config'
 import type { TestProject } from 'vitest/node'
+import { MockerRegistry } from '@vitest/mocker'
+import { interceptorPlugin } from '@vitest/mocker/node'
 import c from 'tinyrainbow'
 import { createViteLogger, createViteServer } from 'vitest/node'
 import { version } from '../../package.json'
@@ -38,6 +40,8 @@ export async function createBrowserServer(
     allowClearScreen: false,
   })
 
+  const mockerRegistry = new MockerRegistry()
+
   const vite = await createViteServer({
     ...project.options, // spread project config inlined in root workspace config
     base: '/',
@@ -68,13 +72,14 @@ export async function createBrowserServer(
       ...prePlugins,
       ...(project.options?.plugins || []),
       BrowserPlugin(server),
+      interceptorPlugin({ registry: mockerRegistry }),
       ...postPlugins,
     ],
   })
 
   await vite.listen()
 
-  setupBrowserRpc(server)
+  setupBrowserRpc(server, mockerRegistry)
 
   return server
 }

packages/browser/src/node/index.ts

@@ -1,3 +1,4 @@
+import type { MockedModule } from '@vitest/mocker'
 import type {
   Browser,
   BrowserContext,
@@ -7,11 +8,15 @@ import type {
   LaunchOptions,
   Page,
 } from 'playwright'
+import type { SourceMap } from 'rollup'
+import type { ResolvedConfig } from 'vite'
 import type {
+  BrowserModuleMocker,
   BrowserProvider,
   BrowserProviderInitializationOptions,
   TestProject,
 } from 'vitest/node'
+import { createManualModuleSource } from '@vitest/mocker/node'
 
 export const playwrightBrowsers = ['firefox', 'webkit', 'chromium'] as const
 export type PlaywrightBrowser = (typeof playwrightBrowsers)[number]
@@ -40,6 +45,8 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
 
   private browserPromise: Promise<Browser> | null = null
 
+  public mocker: BrowserModuleMocker | undefined
+
   getSupportedBrowsers(): readonly string[] {
     return playwrightBrowsers
   }
@@ -51,6 +58,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
     this.project = project
     this.browserName = browser
     this.options = options as any
+    this.mocker = this.createMocker()
   }
 
   private async openBrowser() {
@@ -103,6 +111,136 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
     return this.browserPromise
   }
 
+  private createMocker(): BrowserModuleMocker {
+    const idPreficates = new Map<string, (url: URL) => boolean>()
+    const sessionIds = new Map<string, string[]>()
+
+    function createPredicate(sessionId: string, url: string) {
+      const moduleUrl = new URL(url, 'http://localhost')
+      const predicate = (url: URL) => {
+        if (url.searchParams.has('_vitest_original')) {
+          return false
+        }
+
+        // different modules, ignore request
+        if (url.pathname !== moduleUrl.pathname) {
+          return false
+        }
+
+        url.searchParams.delete('t')
+        url.searchParams.delete('v')
+        url.searchParams.delete('import')
+
+        // different search params, ignore request
+        if (url.searchParams.size !== moduleUrl.searchParams.size) {
+          return false
+        }
+
+        // check that all search params are the same
+        for (const [param, value] of url.searchParams.entries()) {
+          if (moduleUrl.searchParams.get(param) !== value) {
+            return false
+          }
+        }
+
+        return true
+      }
+      const ids = sessionIds.get(sessionId) || []
+      ids.push(moduleUrl.href)
+      sessionIds.set(sessionId, ids)
+      idPreficates.set(moduleUrl.href, predicate)
+      return predicate
+    }
+
+    return {
+      register: async (sessionId: string, module: MockedModule): Promise<void> => {
+        const page = this.getPage(sessionId)
+        await page.route(createPredicate(sessionId, module.url), async (route) => {
+          if (module.type === 'manual') {
+            const exports = Object.keys(await module.resolve())
+            const body = createManualModuleSource(module.url, exports)
+            return route.fulfill({
+              body,
+              headers: getHeaders(this.project.browser!.vite.config),
+            })
+          }
+
+          // webkit doesn't support redirect responses
+          // https://github.com/microsoft/playwright/issues/18318
+          const isWebkit = this.browserName === 'webkit'
+          if (isWebkit) {
+            const url = module.type === 'redirect'
+              ? (() => {
+                  // url has http:// which vite.trasnformRequest doesn't understand
+                  const url = new URL(module.redirect)
+                  return url.href.slice(url.origin.length)
+                })()
+              : (() => {
+                  const url = new URL(route.request().url())
+                  url.searchParams.set('mock', module.type)
+                  return url.href.slice(url.origin.length)
+                })()
+            const result = await this.project.browser!.vite.transformRequest(url).catch(() => null)
+            if (!result) {
+              return route.continue()
+            }
+            let content = result.code
+            if (result.map && 'version' in result.map && result.map.mappings) {
+              const type = isDirectCSSRequest(url) ? 'css' : 'js'
+              content = getCodeWithSourcemap(type, content.toString(), result.map)
+            }
+            return route.fulfill({
+              body: content,
+              headers: getHeaders(this.project.browser!.vite.config),
+            })
+          }
+
+          if (module.type === 'redirect') {
+            return route.fulfill({
+              status: 302,
+              headers: {
+                Location: module.redirect,
+              },
+            })
+          }
+          else if (module.type === 'automock' || module.type === 'autospy') {
+            const url = new URL(route.request().url())
+            url.searchParams.set('mock', module.type)
+            return route.fulfill({
+              status: 302,
+              headers: {
+                Location: url.href,
+              },
+            })
+          }
+          else {
+            // all types are exhausted
+            const _module: never = module
+          }
+        })
+      },
+      delete: async (sessionId: string, id: string): Promise<void> => {
+        const page = this.getPage(sessionId)
+        const predicate = idPreficates.get(id)
+        if (predicate) {
+          await page.unroute(predicate).finally(() => idPreficates.delete(id))
+        }
+      },
+      clear: async (sessionId: string): Promise<void> => {
+        const page = this.getPage(sessionId)
+        const ids = sessionIds.get(sessionId) || []
+        const promises = ids.map((id) => {
+          const predicate = idPreficates.get(id)
+          if (predicate) {
+            return page.unroute(predicate).finally(() => idPreficates.delete(id))
+          }
+          return null
+        })
+        await Promise.all(promises).finally(() => sessionIds.delete(sessionId))
+      },
+    }
+  }
+
   private async createContext(sessionId: string) {
     if (this.contexts.has(sessionId)) {
       return this.contexts.get(sessionId)!
@@ -113,7 +251,6 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
     const options = {
       ...contextOptions,
       ignoreHTTPSErrors: true,
-      serviceWorkers: 'allow',
     } satisfies BrowserContextOptions
     if (this.project.config.browser.ui) {
       options.viewport = null
@@ -154,7 +291,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
           const timeout = setTimeout(() => {
             const err = new Error(`Cannot find "vitest-iframe" on the page. This is a bug in Vitest, please report it.`)
             reject(err)
-          }, 1000)
+          }, 1000).unref()
           page.on('frameattached', (frame) => {
             clearTimeout(timeout)
             resolve(frame)
@@ -241,3 +378,44 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
     await browser?.close()
   }
 }
+
+function getHeaders(config: ResolvedConfig) {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/javascript',
+  }
+
+  for (const name in config.server.headers) {
+    headers[name] = String(config.server.headers[name]!)
+  }
+  return headers
+}
+
+function getCodeWithSourcemap(
+  type: 'js' | 'css',
+  code: string,
+  map: SourceMap,
+): string {
+  if (type === 'js') {
+    code += `\n//# sourceMappingURL=${genSourceMapUrl(map)}`
+  }
+  else if (type === 'css') {
+    code += `\n/*# sourceMappingURL=${genSourceMapUrl(map)} */`
+  }
+
+  return code
+}
+
+function genSourceMapUrl(map: SourceMap | string): string {
+  if (typeof map !== 'string') {
+    map = JSON.stringify(map)
+  }
+  return `data:application/json;base64,${Buffer.from(map).toString('base64')}`
+}
+
+const CSS_LANGS_RE
+  = /\.(?:css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/
+const directRequestRE = /[?&]direct\b/
+
+function isDirectCSSRequest(request: string): boolean {
+  return CSS_LANGS_RE.test(request) && directRequestRE.test(request)
+}