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

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

@@ -1,11 +1,13 @@
 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> {
@@ -42,19 +44,21 @@ export function createModuleMockerInterceptor() {
 }
 
 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') {
+        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
-}

test/browser/fixtures/mocking/mocked-factory.test.ts

@@ -1,5 +1,6 @@
 import { expect, test, vi } from 'vitest'
 import { calculator, mocked } from './src/mocks_factory'
+import factoryMany from './src/mocks_factory_many'
 
 vi.mock(import('./src/mocks_factory'), () => {
   return {
@@ -8,7 +9,19 @@ vi.mock(import('./src/mocks_factory'), () => {
   }
 })
 
+vi.mock(import('./src/mocks_factory_many_dep1'), () => ({
+  dep1: "dep1-mocked"
+}))
+vi.mock(import('./src/mocks_factory_many_dep2'), () => ({
+  dep2: "dep2-mocked"
+}))
+
 test('adds', () => {
   expect(mocked).toBe(true)
   expect(calculator('plus', 1, 2)).toBe(1166)
+
+  expect(factoryMany).toEqual({
+    "dep1": "dep1-mocked",
+    "dep2": "dep2-mocked",
+  })
 })

test/browser/fixtures/mocking/src/mocks_factory_many.ts

@@ -0,0 +1,4 @@
+import { dep1 } from "./mocks_factory_many_dep1";
+import { dep2 } from "./mocks_factory_many_dep2";
+
+export default { dep1, dep2 }

test/browser/fixtures/mocking/src/mocks_factory_many_dep1.ts

@@ -0,0 +1 @@
+export const dep1: string = "dep1"

test/browser/fixtures/mocking/src/mocks_factory_many_dep2.ts

@@ -0,0 +1 @@
+export const dep2: string = "dep2"