fix(browser): await mocker invalidation to avoid race condition with "mock wasn't registered" (#8021)

Author: sheremet-va

packages/browser/src/node/providers/playwright.ts

@@ -179,10 +179,14 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
       const ids = sessionIds.get(sessionId) || []
       ids.push(moduleUrl.href)
       sessionIds.set(sessionId, ids)
-      idPreficates.set(moduleUrl.href, predicate)
+      idPreficates.set(predicateKey(sessionId, moduleUrl.href), predicate)
       return predicate
     }
 
+    function predicateKey(sessionId: string, url: string) {
+      return `${sessionId}:${url}`
+    }
+
     return {
       register: async (sessionId: string, module: MockedModule): Promise<void> => {
         const page = this.getPage(sessionId)
@@ -200,17 +204,17 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
           // 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)
-                })()
+            let url: string
+            if (module.type === 'redirect') {
+              const redirect = new URL(module.redirect)
+              url = redirect.href.slice(redirect.origin.length)
+            }
+            else {
+              const request = new URL(route.request().url())
+              request.searchParams.set('mock', module.type)
+              url = request.href.slice(request.origin.length)
+            }
+
             const result = await this.project.browser!.vite.transformRequest(url).catch(() => null)
             if (!result) {
               return route.continue()
@@ -252,18 +256,20 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
       },
       delete: async (sessionId: string, id: string): Promise<void> => {
         const page = this.getPage(sessionId)
-        const predicate = idPreficates.get(id)
+        const key = predicateKey(sessionId, id)
+        const predicate = idPreficates.get(key)
         if (predicate) {
-          await page.unroute(predicate).finally(() => idPreficates.delete(id))
+          await page.unroute(predicate).finally(() => idPreficates.delete(key))
         }
       },
       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)
+          const key = predicateKey(sessionId, id)
+          const predicate = idPreficates.get(key)
           if (predicate) {
-            return page.unroute(predicate).finally(() => idPreficates.delete(id))
+            return page.unroute(predicate).finally(() => idPreficates.delete(key))
           }
           return null
         })

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

@@ -55,7 +55,7 @@ export class ModuleMockerMSWInterceptor implements ModuleMockerInterceptor {
     this.mocks.delete(url)
   }
 
-  invalidate(): void {
+  async invalidate(): Promise<void> {
     this.mocks.clear()
   }
 

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

@@ -11,7 +11,7 @@ export class ModuleMockerServerInterceptor implements ModuleMockerInterceptor {
     await rpc('vitest:interceptor:delete', id)
   }
 
-  invalidate(): void {
-    rpc('vitest:interceptor:invalidate')
+  async invalidate(): Promise<void> {
+    await rpc('vitest:interceptor:invalidate')
   }
 }

packages/mocker/src/browser/interceptor.ts

@@ -3,5 +3,5 @@ import type { MockedModule } from '../registry'
 export interface ModuleMockerInterceptor {
   register: (module: MockedModule) => Promise<void>
   delete: (url: string) => Promise<void>
-  invalidate: () => void
+  invalidate: () => Promise<void>
 }

packages/mocker/src/browser/mocker.ts

@@ -53,7 +53,7 @@ export class ModuleMocker {
       return
     }
     await this.rpc.invalidate(ids)
-    this.interceptor.invalidate()
+    await this.interceptor.invalidate()
     this.registry.clear()
   }