fix(browser): fix browser mock factory event race condition

Author: hi-ogawa

packages/browser/src/client/channel.ts

@@ -39,16 +39,19 @@ export interface IframeMockingDoneEvent {
 
 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
 }
 

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

@@ -1,4 +1,4 @@
-import type { IframeChannelOutgoingEvent } from '@vitest/browser/client'
+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'
@@ -14,18 +14,20 @@ export class VitestBrowserClientMocker extends ModuleMocker {
             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)
           }
         }
       },

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

@@ -6,6 +6,7 @@ import type {
 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> {
@@ -42,19 +43,21 @@ export function createModuleMockerInterceptor() {
 }
 
 function getFactoryExports(id: string) {
+  const eventId = nanoid()
   channel.postMessage({
     type: 'mock-factory:request',
+    eventId,
     id,
   })
   return new Promise<string[]>((resolve, reject) => {
     channel.addEventListener(
       'message',
       function onMessage(e: MessageEvent<IframeChannelEvent>) {
-        if (e.data.type === 'mock-factory:response') {
+        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') {
+        if (e.data.type === 'mock-factory:error' && e.data.eventId === eventId) {
           reject(e.data.error)
           channel.removeEventListener('message', onMessage)
         }

packages/utils/src/index.ts

@@ -51,3 +51,5 @@ export type {
   SerializedError,
   TestError,
 } from './types'
+
+export { nanoid } from './nanoid'

packages/utils/src/nanoid.ts

@@ -0,0 +1,12 @@
+// port from nanoid
+// https://github.com/ai/nanoid
+const urlAlphabet
+  = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'
+export function nanoid(size = 21): string {
+  let id = ''
+  let i = size
+  while (i--) {
+    id += urlAlphabet[(Math.random() * 64) | 0]
+  }
+  return id
+}

packages/vitest/src/utils/base.ts

@@ -1,6 +1,6 @@
 import type { Arrayable, Nullable } from '../types/general'
 
-export { notNullish, getCallLastIndex } from '@vitest/utils'
+export { notNullish, getCallLastIndex, nanoid } from '@vitest/utils'
 
 export interface GlobalConstructors {
   Object: ObjectConstructor
@@ -203,16 +203,3 @@ export function wildcardPatternToRegExp(pattern: string): RegExp {
     'i',
   )
 }
-
-// port from nanoid
-// https://github.com/ai/nanoid
-const urlAlphabet
-  = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'
-export function nanoid(size = 21) {
-  let id = ''
-  let i = size
-  while (i--) {
-    id += urlAlphabet[(Math.random() * 64) | 0]
-  }
-  return id
-}