diff --git a/test/browser/fixtures/mocking/service-worker.js b/test/browser/fixtures/mocking/service-worker.js index 0d7517bd8..9558b8e46 100644 --- a/test/browser/fixtures/mocking/service-worker.js +++ b/test/browser/fixtures/mocking/service-worker.js @@ -1,29 +1,28 @@ 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" }); - } - }); - \ No newline at end of file + 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" }); + } +}); diff --git a/test/browser/fixtures/mocking/service-worker.test.ts b/test/browser/fixtures/mocking/service-worker.test.ts index 9e1310b42..3f0f489d5 100644 --- a/test/browser/fixtures/mocking/service-worker.test.ts +++ b/test/browser/fixtures/mocking/service-worker.test.ts @@ -1,37 +1,40 @@ -import { expect, test, vi, afterEach } from "vitest"; +import { expect, test, vi } from "vitest"; import { server } from 'vitest/browser' vi.mock("./src/actions", () => ({ - plus: vi.fn().mockReturnValue(12345), - })); + 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); +test.runIf(server.config.name === 'chromium')("Service worker does not break vi.mock", async (t) => { + const registration = await navigator.serviceWorker.register( + new URL("./service-worker.js", import.meta.url) + ); + t.onTestFinished(async () => { + await registration.unregister() + }) + + 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); }); diff --git a/test/browser/specs/mocking.test.ts b/test/browser/specs/mocking.test.ts index 350ec0569..688b19f7f 100644 --- a/test/browser/specs/mocking.test.ts +++ b/test/browser/specs/mocking.test.ts @@ -2,7 +2,9 @@ import { expect, onTestFailed, onTestFinished, test } from 'vitest' import { editFile, runVitest } from '../../test-utils' import { instances } from '../settings' -test.each([true, false])('mocking works correctly - isolated %s', async (isolate) => { +// TODO: investigate `isolate: false` tests. +// Doesn't seem like we can run things in parallel if there are mocks +test.each([true/* , false */])('mocking works correctly - isolated %s', async (isolate) => { const result = await runVitest({ root: 'fixtures/mocking', isolate,