fix(browser): use iframe id instead of calculating it from filenames (#5823)

Author: sheremet-va

packages/browser/src/client/orchestrator.ts

@@ -58,13 +58,15 @@ async function done() {
 interface IframeDoneEvent {
   type: 'done'
   filenames: string[]
+  id: string
 }
 
 interface IframeErrorEvent {
   type: 'error'
   error: any
   errorType: string
   files: string[]
+  id: string
 }
 
 interface IframeViewportEvent {
@@ -133,15 +135,15 @@ client.ws.addEventListener('open', async () => {
         }
         else {
           // keep the last iframe
-          const iframeId = filenames.length > 1 ? ID_ALL : filenames[0]
+          const iframeId = e.data.id
           iframes.get(iframeId)?.remove()
           iframes.delete(iframeId)
         }
         break
       }
       // error happened at the top level, this should never happen in user code, but it can trigger during development
       case 'error': {
-        const iframeId = e.data.files.length > 1 ? ID_ALL : e.data.files[0]
+        const iframeId = e.data.id
         iframes.delete(iframeId)
         await client.rpc.onUnhandledError(e.data.error, e.data.errorType)
         if (iframeId === ID_ALL)
@@ -178,6 +180,9 @@ async function createTesters(testFiles: string[]) {
   }
   const { width, height } = config.browser.viewport
 
+  iframes.forEach(iframe => iframe.remove())
+  iframes.clear()
+
   if (config.isolate === false) {
     const iframe = createIframe(
       container,

packages/browser/src/client/tester.ts

@@ -140,7 +140,11 @@ async function prepareTestEnvironment(files: string[]) {
 }
 
 function done(files: string[]) {
-  channel.postMessage({ type: 'done', filenames: files })
+  channel.postMessage({
+    type: 'done',
+    filenames: files,
+    id: getBrowserState().iframeId!,
+  })
 }
 
 async function runTests(files: string[]) {

packages/browser/src/client/unhandled.ts

@@ -19,7 +19,13 @@ export function serializeError(unhandledError: any) {
 // we can't import "processError" yet because error might've been thrown before the module was loaded
 async function defaultErrorReport(type: string, unhandledError: any) {
   const error = serializeError(unhandledError)
-  channel.postMessage({ type: 'error', files: getBrowserState().runningFiles, error, errorType: type })
+  channel.postMessage({
+    type: 'error',
+    files: getBrowserState().runningFiles,
+    error,
+    errorType: type,
+    id: getBrowserState().iframeId!,
+  })
 }
 
 function catchWindowErrors(cb: (e: ErrorEvent) => void) {

packages/browser/src/node/index.ts

@@ -106,7 +106,7 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
           const decodedTestFile = decodeURIComponent(url.pathname.slice(testerPrefix.length))
           // if decoded test file is "__vitest_all__" or not in the list of known files, run all tests
           const tests = decodedTestFile === '__vitest_all__' || !files.includes(decodedTestFile) ? '__vitest_browser_runner__.files' : JSON.stringify([decodedTestFile])
-          const iframeId = decodedTestFile === '__vitest_all__' ? '"__vitest_all__"' : JSON.stringify(decodedTestFile)
+          const iframeId = JSON.stringify(decodedTestFile)
 
           if (!testerScripts)
             testerScripts = await formatScripts(project.config.browser.testerScripts, server)

packages/vitest/src/node/pools/browser.ts

@@ -14,7 +14,6 @@ export function createBrowserPool(ctx: Vitest): ProcessPool {
       files,
       resolve: () => {
         defer.resolve()
-        project.browserState = undefined
       },
       reject: defer.reject,
     }