fix(browser): allow service workers to mock the network in chromium without breaking vi.mock (#8668)

Co-authored-by: Vladimir <[email protected]>

Author: Georgegriff

packages/browser-playwright/src/playwright.ts

@@ -41,6 +41,10 @@ const debug = createDebugger('vitest:browser:playwright')
 const playwrightBrowsers = ['firefox', 'webkit', 'chromium'] as const
 type PlaywrightBrowser = (typeof playwrightBrowsers)[number]
 
+// Enable intercepting of requests made by service workers - experimental API is only available in Chromium based browsers
+// Requests from service workers are only available on context.route() https://playwright.dev/docs/service-workers-experimental
+process.env.PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS ??= '1'
+
 export interface PlaywrightProviderOptions {
   /**
    * The options passed down to [`playwright.connect`](https://playwright.dev/docs/api/class-browsertype#browser-type-launch) method.
@@ -254,7 +258,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
     return {
       register: async (sessionId: string, module: MockedModule): Promise<void> => {
         const page = this.getPage(sessionId)
-        await page.route(createPredicate(sessionId, module.url), async (route) => {
+        await page.context().route(createPredicate(sessionId, module.url), async (route) => {
           if (module.type === 'manual') {
             const exports = Object.keys(await module.resolve())
             const body = createManualModuleSource(module.url, exports)
@@ -323,7 +327,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
         const key = predicateKey(sessionId, id)
         const predicate = idPreficates.get(key)
         if (predicate) {
-          await page.unroute(predicate).finally(() => idPreficates.delete(key))
+          await page.context().unroute(predicate).finally(() => idPreficates.delete(key))
         }
       },
       clear: async (sessionId: string): Promise<void> => {
@@ -333,7 +337,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
           const key = predicateKey(sessionId, id)
           const predicate = idPreficates.get(key)
           if (predicate) {
-            return page.unroute(predicate).finally(() => idPreficates.delete(key))
+            return page.context().unroute(predicate).finally(() => idPreficates.delete(key))
           }
           return null
         })

test/browser/fixtures/mocking/service-worker.js

@@ -0,0 +1,29 @@
+self.addEventListener("install", (event) => {
+    event.waitUntil(self.skipWaiting());
+  });
+  
+  self.addEventListener("activate", (event) => {
+    event.waitUntil(self.clients.claim());
+  });
+  
+  self.addEventListener("fetch", (event) => {
+    if (event.request.url.includes("/hello")) {
+      event.respondWith(
+        new Response("Hello from Service Worker!", {
+          status: 200,
+          headers: { "Content-Type": "text/plain" },
+        })
+      );
+    } else {
+      // Pass through other requests
+      event.respondWith(fetch(event.request));
+    }
+  });
+  
+  // Handle messages from the test
+  self.addEventListener("message", (event) => {
+    if (event.data.type === "PING") {
+      event.ports[0].postMessage({ type: "PONG" });
+    }
+  });
+  

test/browser/fixtures/mocking/service-worker.test.ts

@@ -0,0 +1,37 @@
+import { expect, test, vi, afterEach } from "vitest";
+import { server } from 'vitest/browser'
+
+vi.mock("./src/actions", () => ({
+    plus: vi.fn().mockReturnValue(12345),
+  }));
+
+
+test.runIf(server.config.name === 'chromium')("Service worker does not break vi.mock", async () => {
+    const registration = await navigator.serviceWorker.register(
+        new URL("./service-worker.js", import.meta.url)
+      );
+    
+      await vi.waitFor(() => expect(registration.active?.state).toBe("activated"));
+      await navigator.serviceWorker.ready;
+      let swResponseMessage = null;
+      const messageChannel = new MessageChannel();
+      messageChannel.port1.onmessage = (event) => {
+        swResponseMessage = event.data;
+      };
+      registration.active.postMessage({ type: "PING" }, [messageChannel.port2]);
+      await vi.waitFor(() => expect(swResponseMessage.type).toBe("PONG"));
+    
+      // Send a mocked API request to the service worker
+      const response = await fetch("/hello");
+      // Assert the service worker intercepted the request
+      const responseText = await response.text();
+      expect(response.status).toBe(200);
+      expect(responseText).toBe("Hello from Service Worker!");
+    
+      // Send an import, which will be intercepted by the service worker
+      // Verify vi.mock is still functional after mocking the network with a service worker
+      const { plus } = await import("./src/actions");
+      const result = plus(1, 2);
+      expect(plus).toHaveBeenCalled();
+      expect(result).toBe(12345);
+});