fix(browser): initiate MSW in the same frame as tests

Author: sheremet-va

packages/browser/package.json

@@ -89,7 +89,7 @@
     "@vitest/mocker": "workspace:*",
     "@vitest/utils": "workspace:*",
     "magic-string": "^0.30.12",
-    "msw": "^2.4.9",
+    "msw": "^2.4.13",
     "sirv": "^3.0.0",
     "tinyrainbow": "^1.2.0",
     "ws": "^8.18.0"

packages/browser/src/client/channel.ts

@@ -1,5 +1,4 @@
 import type { CancelReason } from '@vitest/runner'
-import type { MockedModuleSerialized } from '@vitest/mocker'
 import { getBrowserState } from './utils'
 
 export interface IframeDoneEvent {
@@ -23,46 +22,6 @@ export interface IframeViewportEvent {
   id: string
 }
 
-export interface IframeMockEvent {
-  type: 'mock'
-  module: MockedModuleSerialized
-}
-
-export interface IframeUnmockEvent {
-  type: 'unmock'
-  url: string
-}
-
-export interface IframeMockingDoneEvent {
-  type: 'mock:done' | 'unmock:done'
-}
-
-export interface IframeMockFactoryRequestEvent {
-  type: 'mock-factory:request'
-  eventId: string
-  id: string
-}
-
-export interface IframeMockFactoryResponseEvent {
-  type: 'mock-factory:response'
-  eventId: string
-  exports: string[]
-}
-
-export interface IframeMockFactoryErrorEvent {
-  type: 'mock-factory:error'
-  eventId: string
-  error: any
-}
-
-export interface IframeViewportChannelEvent {
-  type: 'viewport:done' | 'viewport:fail'
-}
-
-export interface IframeMockInvalidateEvent {
-  type: 'mock:invalidate'
-}
-
 export interface GlobalChannelTestRunCanceledEvent {
   type: 'cancel'
   reason: CancelReason
@@ -74,16 +33,8 @@ export type IframeChannelIncomingEvent =
   | IframeViewportEvent
   | IframeErrorEvent
   | IframeDoneEvent
-  | IframeMockEvent
-  | IframeUnmockEvent
-  | IframeMockFactoryResponseEvent
-  | IframeMockFactoryErrorEvent
-  | IframeMockInvalidateEvent
 
-export type IframeChannelOutgoingEvent =
-  | IframeMockFactoryRequestEvent
-  | IframeViewportChannelEvent
-  | IframeMockingDoneEvent
+export type IframeChannelOutgoingEvent = never
 
 export type IframeChannelEvent =
   | IframeChannelIncomingEvent

packages/browser/src/client/orchestrator.ts

@@ -5,15 +5,13 @@ import { relative } from 'pathe'
 import type { SerializedConfig } from 'vitest'
 import { getBrowserState, getConfig } from './utils'
 import { getUiAPI } from './ui'
-import { createModuleMockerInterceptor } from './tester/msw'
 
 const url = new URL(location.href)
 const ID_ALL = '__vitest_all__'
 
 class IframeOrchestrator {
   private cancelled = false
   private runningFiles = new Set<string>()
-  private interceptor = createModuleMockerInterceptor()
   private iframes = new Map<string, HTMLIFrameElement>()
 
   public async init() {
@@ -186,19 +184,6 @@ class IframeOrchestrator {
         }
         break
       }
-      case 'mock:invalidate':
-        this.interceptor.invalidate()
-        break
-      case 'unmock':
-        await this.interceptor.delete(e.data.url)
-        break
-      case 'mock':
-        await this.interceptor.register(e.data.module)
-        break
-      case 'mock-factory:error':
-      case 'mock-factory:response':
-        // handled manually
-        break
       default: {
           e.data satisfies never
 

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

@@ -1,39 +1,7 @@
-import type { IframeChannelOutgoingEvent, IframeMockFactoryErrorEvent, IframeMockFactoryResponseEvent } from '@vitest/browser/client'
-import { channel } from '@vitest/browser/client'
 import { ModuleMocker } from '@vitest/mocker/browser'
 import { getBrowserState } from '../utils'
 
 export class VitestBrowserClientMocker extends ModuleMocker {
-  setupWorker() {
-    channel.addEventListener(
-      'message',
-      async (e: MessageEvent<IframeChannelOutgoingEvent>) => {
-        if (e.data.type === 'mock-factory:request') {
-          try {
-            const module = await this.resolveFactoryModule(e.data.id)
-            const exports = Object.keys(module)
-            channel.postMessage({
-              type: 'mock-factory:response',
-              eventId: e.data.eventId,
-              exports,
-            } satisfies IframeMockFactoryResponseEvent)
-          }
-          catch (err: any) {
-            channel.postMessage({
-              type: 'mock-factory:error',
-              eventId: e.data.eventId,
-              error: {
-                name: err.name,
-                message: err.message,
-                stack: err.stack,
-              },
-            } satisfies IframeMockFactoryErrorEvent)
-          }
-        }
-      },
-    )
-  }
-
   // default "vi" utility tries to access mock context to avoid circular dependencies
   public getMockContext() {
     return { callstack: null }

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

@@ -1,38 +1,9 @@
-import { channel } from '@vitest/browser/client'
-import type {
-  IframeChannelEvent,
-  IframeMockFactoryRequestEvent,
-  IframeMockingDoneEvent,
-} from '@vitest/browser/client'
-import type { MockedModuleSerialized } from '@vitest/mocker'
-import { ManualMockedModule } from '@vitest/mocker'
 import { ModuleMockerMSWInterceptor } from '@vitest/mocker/browser'
-import { nanoid } from '@vitest/utils'
-
-export class VitestBrowserModuleMockerInterceptor extends ModuleMockerMSWInterceptor {
-  override async register(event: MockedModuleSerialized): Promise<void> {
-    if (event.type === 'manual') {
-      const module = ManualMockedModule.fromJSON(event, async () => {
-        const keys = await getFactoryExports(event.url)
-        return Object.fromEntries(keys.map(key => [key, null]))
-      })
-      await super.register(module)
-    }
-    else {
-      await this.init()
-      this.mocks.register(event)
-    }
-    channel.postMessage(<IframeMockingDoneEvent>{ type: 'mock:done' })
-  }
-
-  override async delete(url: string): Promise<void> {
-    await super.delete(url)
-    channel.postMessage(<IframeMockingDoneEvent>{ type: 'unmock:done' })
-  }
-}
+import { getConfig } from '../utils'
 
 export function createModuleMockerInterceptor() {
-  return new VitestBrowserModuleMockerInterceptor({
+  const debug = getConfig().env.VITEST_BROWSER_DEBUG
+  return new ModuleMockerMSWInterceptor({
     globalThisAccessor: '"__vitest_mocker__"',
     mswOptions: {
       serviceWorker: {
@@ -42,31 +13,7 @@ export function createModuleMockerInterceptor() {
         },
       },
       onUnhandledRequest: 'bypass',
-      quiet: true,
+      quiet: !(debug && debug !== 'false'),
     },
   })
 }
-
-function getFactoryExports(id: string) {
-  const eventId = nanoid()
-  channel.postMessage({
-    type: 'mock-factory:request',
-    eventId,
-    id,
-  } satisfies IframeMockFactoryRequestEvent)
-  return new Promise<string[]>((resolve, reject) => {
-    channel.addEventListener(
-      'message',
-      function onMessage(e: MessageEvent<IframeChannelEvent>) {
-        if (e.data.type === 'mock-factory:response' && e.data.eventId === eventId) {
-          resolve(e.data.exports)
-          channel.removeEventListener('message', onMessage)
-        }
-        if (e.data.type === 'mock-factory:error' && e.data.eventId === eventId) {
-          reject(e.data.error)
-          channel.removeEventListener('message', onMessage)
-        }
-      },
-    )
-  })
-}

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

@@ -1,14 +1,14 @@
 import { SpyModule, collectTests, setupCommonEnv, startCoverageInsideWorker, startTests, stopCoverageInsideWorker } from 'vitest/browser'
 import { page, userEvent } from '@vitest/browser/context'
-import type { IframeMockEvent, IframeMockInvalidateEvent, IframeUnmockEvent } from '@vitest/browser/client'
-import { channel, client, onCancel, waitForChannel } from '@vitest/browser/client'
+import { channel, client, onCancel } from '@vitest/browser/client'
 import { executor, getBrowserState, getConfig, getWorkerState } from '../utils'
 import { setupDialogsSpy } from './dialog'
 import { setupConsoleLogSpy } from './logger'
 import { createSafeRpc } from './rpc'
 import { browserHashMap, initiateRunner } from './runner'
 import { VitestBrowserClientMocker } from './mocker'
 import { setupExpectDom } from './expect-element'
+import { createModuleMockerInterceptor } from './msw'
 
 const cleanupSymbol = Symbol.for('vitest:component-cleanup')
 
@@ -34,28 +34,10 @@ async function prepareTestEnvironment(files: string[]) {
   state.onCancel = onCancel
   state.rpc = rpc as any
 
+  // TODO: expose `worker`
+  const interceptor = createModuleMockerInterceptor()
   const mocker = new VitestBrowserClientMocker(
-    {
-      async delete(url: string) {
-        channel.postMessage({
-          type: 'unmock',
-          url,
-        } satisfies IframeUnmockEvent)
-        await waitForChannel('unmock:done')
-      },
-      async register(module) {
-        channel.postMessage({
-          type: 'mock',
-          module: module.toJSON(),
-        } satisfies IframeMockEvent)
-        await waitForChannel('mock:done')
-      },
-      invalidate() {
-        channel.postMessage({
-          type: 'mock:invalidate',
-        } satisfies IframeMockInvalidateEvent)
-      },
-    },
+    interceptor,
     rpc,
     SpyModule.spyOn,
     {
@@ -79,8 +61,6 @@ async function prepareTestEnvironment(files: string[]) {
     }
   })
 
-  mocker.setupWorker()
-
   onCancel.then((reason) => {
     runner.onCancel?.(reason)
   })

packages/browser/src/node/constants.ts

@@ -0,0 +1,5 @@
+import { fileURLToPath } from 'node:url'
+import { resolve } from 'pathe'
+
+const pkgRoot = resolve(fileURLToPath(import.meta.url), '../..')
+export const distRoot = resolve(pkgRoot, 'dist')

packages/browser/src/node/index.ts

@@ -10,6 +10,8 @@ import BrowserPlugin from './plugin'
 export type { BrowserServer } from './server'
 export { createBrowserPool } from './pool'
 
+export { distRoot } from './constants'
+
 export async function createBrowserServer(
   project: WorkspaceProject,
   configFile: string | undefined,

packages/browser/src/node/plugin.ts

@@ -1,4 +1,3 @@
-import { fileURLToPath } from 'node:url'
 import { createRequire } from 'node:module'
 import { lstatSync, readFileSync } from 'node:fs'
 import type { Stats } from 'node:fs'
@@ -14,13 +13,12 @@ import BrowserContext from './plugins/pluginContext'
 import type { BrowserServer } from './server'
 import { resolveOrchestrator } from './serverOrchestrator'
 import { resolveTester } from './serverTester'
+import { distRoot } from './constants'
 
 export type { BrowserCommand } from 'vitest/node'
 export { defineBrowserCommand } from './commands/utils'
 
 export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
-  const pkgRoot = resolve(fileURLToPath(import.meta.url), '../..')
-  const distRoot = resolve(pkgRoot, 'dist')
   const project = browserServer.project
 
   function isPackageExists(pkg: string, root: string) {
@@ -322,6 +320,12 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
     BrowserContext(browserServer),
     dynamicImportPlugin({
       globalThisAccessor: '"__vitest_browser_runner__"',
+      filter(id) {
+        if (id.includes(distRoot)) {
+          return false
+        }
+        return true
+      },
     }),
     {
       name: 'vitest:browser:config',

packages/mocker/src/browser/interceptor-msw.ts

@@ -34,8 +34,8 @@ export interface ModuleMockerMSWInterceptorOptions {
 export class ModuleMockerMSWInterceptor implements ModuleMockerInterceptor {
   protected readonly mocks: MockerRegistry = new MockerRegistry()
 
-  private started = false
-  private startPromise: undefined | Promise<unknown>
+  private startPromise: undefined | Promise<SetupWorker>
+  private worker: undefined | SetupWorker
 
   constructor(
     private readonly options: ModuleMockerMSWInterceptorOptions = {},
@@ -78,9 +78,9 @@ export class ModuleMockerMSWInterceptor implements ModuleMockerInterceptor {
     })
   }
 
-  protected async init(): Promise<unknown> {
-    if (this.started) {
-      return
+  protected async init(): Promise<SetupWorker> {
+    if (this.worker) {
+      return this.worker
     }
     if (this.startPromise) {
       return this.startPromise
@@ -126,13 +126,13 @@ export class ModuleMockerMSWInterceptor implements ModuleMockerInterceptor {
           }
         }),
       )
-      return worker.start(this.options.mswOptions)
+      return worker.start(this.options.mswOptions).then(() => worker)
     })
       .finally(() => {
-        this.started = true
+        this.worker = worker
         this.startPromise = undefined
       })
-    await this.startPromise
+    return await this.startPromise
   }
 }