fix(browser): remove orphaned Playwright route when same module is mocked via multiple ids [backport to v4] (#10474)

toxik · Zelys-DFKH · web-flow · commit 675b4343fd82 · 2026-06-01T09:54:51.000+02:00
Co-authored-by: Zelys &lt;zelys@dfkhelper.com&gt;
diff --git a/packages/browser-playwright/src/playwright.ts b/packages/browser-playwright/src/playwright.ts
@@ -261,9 +261,9 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
 
   private createMocker(): BrowserModuleMocker {
     const idPredicates = new Map<string, (url: URL) => boolean>()
-    const sessionIds = new Map<string, string[]>()
+    const sessionIds = new Map<string, Set<string>>()
 
-    function createPredicate(sessionId: string, url: string) {
+    function createPredicate(url: string) {
       const moduleUrl = new URL(url, 'http://localhost')
       const predicate = (url: URL) => {
         if (url.searchParams.has('_vitest_original')) {
@@ -293,11 +293,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
 
         return true
       }
-      const ids = sessionIds.get(sessionId) || []
-      ids.push(moduleUrl.href)
-      sessionIds.set(sessionId, ids)
-      idPredicates.set(predicateKey(sessionId, moduleUrl.href), predicate)
-      return predicate
+      return { url: moduleUrl.href, predicate }
     }
 
     function predicateKey(sessionId: string, url: string) {
@@ -307,7 +303,17 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
     return {
       register: async (sessionId: string, module: MockedModule): Promise<void> => {
         const page = this.getPage(sessionId)
-        await page.context().route(createPredicate(sessionId, module.url), async (route) => {
+        const { url: moduleUrl, predicate } = createPredicate(module.url)
+        const key = predicateKey(sessionId, moduleUrl)
+        const existingPredicate = idPredicates.get(key)
+        if (existingPredicate) {
+          await page.context().unroute(existingPredicate)
+        }
+        const ids = sessionIds.get(sessionId) ?? new Set<string>()
+        ids.add(moduleUrl)
+        sessionIds.set(sessionId, ids)
+        idPredicates.set(key, predicate)
+        await page.context().route(predicate, async (route) => {
           if (module.type === 'manual') {
             const exports = Object.keys(await module.resolve())
             const body = createManualModuleSource(module.url, exports)
@@ -381,8 +387,8 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
       },
       clear: async (sessionId: string): Promise<void> => {
         const page = this.getPage(sessionId)
-        const ids = sessionIds.get(sessionId) || []
-        const promises = ids.map((id) => {
+        const ids = sessionIds.get(sessionId) ?? new Set<string>()
+        const promises = [...ids].map((id) => {
           const key = predicateKey(sessionId, id)
           const predicate = idPredicates.get(key)
           if (predicate) {
diff --git a/test/browser/fixtures/mocking/src/aaa-dual-id-probe.test.ts b/test/browser/fixtures/mocking/src/aaa-dual-id-probe.test.ts
@@ -0,0 +1,14 @@
+import { expect, test, vi } from 'vitest'
+import { loadModalSource } from './dual-id/consumer'
+
+vi.mock('~/dual-id/modal', () => ({
+  readModalSource: () => 'mocked modal',
+}))
+
+vi.mock('./dual-id/modal', () => ({
+  readModalSource: () => 'mocked modal',
+}))
+
+test('dual-id mock is active in the file that registered it', () => {
+  expect(loadModalSource()).not.toBe('actual modal')
+})
diff --git a/test/browser/fixtures/mocking/src/dual-id/consumer.ts b/test/browser/fixtures/mocking/src/dual-id/consumer.ts
@@ -0,0 +1,5 @@
+import { readModalSource } from '~/dual-id/modal'
+
+export function loadModalSource() {
+  return readModalSource()
+}
diff --git a/test/browser/fixtures/mocking/src/dual-id/modal.ts b/test/browser/fixtures/mocking/src/dual-id/modal.ts
@@ -0,0 +1,3 @@
+export function readModalSource() {
+  return 'actual modal'
+}
diff --git a/test/browser/fixtures/mocking/src/zzz-dual-id-target.test.ts b/test/browser/fixtures/mocking/src/zzz-dual-id-target.test.ts
@@ -0,0 +1,6 @@
+import { expect, test } from 'vitest'
+import { loadModalSource } from './dual-id/consumer'
+
+test('dual-id mock from the previous file does not leak into this one', () => {
+  expect(loadModalSource()).toBe('actual modal')
+})
diff --git a/test/browser/fixtures/mocking/vitest.config.ts b/test/browser/fixtures/mocking/vitest.config.ts
@@ -3,6 +3,11 @@ import { defineConfig } from 'vitest/config'
 import { instances, provider } from '../../settings'
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      '~': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
   optimizeDeps: {
     include: ['@vitest/cjs-lib'],
     needsInterop: ['@vitest/cjs-lib'],
diff --git a/test/browser/specs/mocking.test.ts b/test/browser/specs/mocking.test.ts
@@ -28,13 +28,35 @@ test.each([true/* , false */])('mocking works correctly - isolated %s', async (i
     expect(result.stdout).toReportPassedTest('import-actual-in-mock.test.ts', browser)
     expect(result.stdout).toReportPassedTest('import-actual-query.test.ts', browser)
     expect(result.stdout).toReportPassedTest('import-mock.test.ts', browser)
+    expect(result.stdout).toReportPassedTest('src/aaa-dual-id-probe.test.ts', browser)
+    expect(result.stdout).toReportPassedTest('src/zzz-dual-id-target.test.ts', browser)
     expect(result.stdout).toReportPassedTest('mocked-do-mock-factory.test.ts', browser)
     expect(result.stdout).toReportPassedTest('import-actual-dep.test.ts', browser)
   })
 
   expect(result.exitCode).toBe(0)
 })
 
+test('manual mocks do not leak across browser files when alias and relative ids resolve to the same module', async () => {
+  const result = await runVitest({
+    root: 'fixtures/mocking',
+  }, ['src/aaa-dual-id-probe.test.ts', 'src/zzz-dual-id-target.test.ts'])
+
+  onTestFailed(() => {
+    console.error(result.stdout)
+    console.error(result.stderr)
+  })
+
+  expect(result.stderr).toReportNoErrors()
+
+  instances.forEach(({ browser }) => {
+    expect(result.stdout).toReportPassedTest('src/aaa-dual-id-probe.test.ts', browser)
+    expect(result.stdout).toReportPassedTest('src/zzz-dual-id-target.test.ts', browser)
+  })
+
+  expect(result.exitCode).toBe(0)
+}, 60_000)
+
 test('mocking dependency correctly invalidates it on rerun', async () => {
   const { vitest, ctx } = await runVitest({
     root: 'fixtures/mocking-watch',

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function readModalSource() {`
	`2`	`+ return 'actual modal'`
	`3`	`+}`