fix(browser): always clean up iframes on rerun (#5827)

vitest-dev · Jun 3, 2024 · 087fa87 · 087fa87
1 parent 1831008
commit 087fa87
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 9 deletions.
diff --git a/packages/browser/src/client/orchestrator.ts b/packages/browser/src/client/orchestrator.ts
@@ -76,7 +76,11 @@ interface IframeViewportEvent {
   id: string
 }
 
-type IframeChannelEvent = IframeDoneEvent | IframeErrorEvent | IframeViewportEvent
+interface IframeViewportChannelEvent {
+  type: 'viewport:done' | 'viewport:fail'
+}
+
+type IframeChannelEvent = IframeDoneEvent | IframeErrorEvent | IframeViewportEvent | IframeViewportChannelEvent
 
 async function getContainer(config: ResolvedConfig): Promise<HTMLDivElement> {
   if (config.browser.ui) {
@@ -93,12 +97,15 @@ async function getContainer(config: ResolvedConfig): Promise<HTMLDivElement> {
   return document.querySelector('#vitest-tester') as HTMLDivElement
 }
 
+const runningFiles = new Set<string>()
+
 client.ws.addEventListener('open', async () => {
   const testFiles = getBrowserState().files
 
   debug('test files', testFiles.join(', '))
 
-  const runningFiles = new Set<string>(testFiles)
+  runningFiles.clear()
+  testFiles.forEach(file => runningFiles.add(file))
 
   channel.addEventListener('message', async (e: MessageEvent<IframeChannelEvent>): Promise<void> => {
     debug('channel event', JSON.stringify(e.data))
@@ -171,6 +178,9 @@ client.ws.addEventListener('open', async () => {
 })
 
 async function createTesters(testFiles: string[]) {
+  runningFiles.clear()
+  testFiles.forEach(file => runningFiles.add(file))
+
   const config = getConfig()
   const container = await getContainer(config)
 

diff --git a/packages/browser/src/node/index.ts b/packages/browser/src/node/index.ts
@@ -104,8 +104,9 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
           }
 
           const decodedTestFile = decodeURIComponent(url.pathname.slice(testerPrefix.length))
+          const testFiles = await project.globTestFiles()
           // 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 tests = decodedTestFile === '__vitest_all__' || !testFiles.includes(decodedTestFile) ? '__vitest_browser_runner__.files' : JSON.stringify([decodedTestFile])
           const iframeId = JSON.stringify(decodedTestFile)
 
           if (!testerScripts)

diff --git a/packages/browser/src/node/providers/preview.ts b/packages/browser/src/node/providers/preview.ts
@@ -18,7 +18,7 @@ export class PreviewBrowserProvider implements BrowserProvider {
     this.ctx = ctx
     this.open = false
     if (ctx.config.browser.headless)
-      throw new Error('You\'ve enabled headless mode for "preview" provider but it doesn\'t support it.')
+      throw new Error('You\'ve enabled headless mode for "preview" provider but it doesn\'t support it. Use "playwright" or "webdriverio" instead: https://vitest.dev/guide/browser#configuration')
   }
 
   async openPage(_url: string) {

diff --git a/packages/ui/client/components/TasksList.vue b/packages/ui/client/components/TasksList.vue
@@ -36,7 +36,11 @@ const filteredTests: ComputedRef<File[]> = computed(() => isFiltered.value ? fil
 const failed = computed(() => filtered.value.filter(task => task.result?.state === 'fail'))
 const success = computed(() => filtered.value.filter(task => task.result?.state === 'pass'))
 const skipped = computed(() => filtered.value.filter(task => task.mode === 'skip' || task.mode === 'todo'))
-const running = computed(() => filtered.value.filter(task => !task.result || task.result.state === 'run'))
+const running = computed(() => filtered.value.filter(task =>
+  !failed.value.includes(task)
+  && !success.value.includes(task)
+  && !skipped.value.includes(task),
+))
 
 const disableClearSearch = computed(() => search.value === '')
 
@@ -128,7 +132,7 @@ function matchTasks(tasks: Task[], search: string): boolean {
             :on-item-click="onItemClick"
           />
         </DetailsPanel>
-        <DetailsPanel v-if="running.length || testRunState === 'running'">
+        <DetailsPanel v-if="throttledRunning.length">
           <template #summary>
             <div text-yellow5>
               RUNNING ({{ throttledRunning.length }})

diff --git a/packages/vitest/src/node/pools/browser.ts b/packages/vitest/src/node/pools/browser.ts
@@ -14,6 +14,7 @@ export function createBrowserPool(ctx: Vitest): ProcessPool {
       files,
       resolve: () => {
         defer.resolve()
+        project.browserState = undefined
       },
       reject: defer.reject,
     }

diff --git a/packages/vitest/src/utils/serialization.ts b/packages/vitest/src/utils/serialization.ts
@@ -15,8 +15,16 @@ function cloneByOwnProperties(value: any) {
  * flatted.stringify().
  */
 export function stringifyReplace(key: string, value: any) {
-  if (value instanceof Error)
-    return cloneByOwnProperties(value)
-  else
+  if (value instanceof Error) {
+    const cloned = cloneByOwnProperties(value)
+    return {
+      name: value.name,
+      message: value.message,
+      stack: value.stack,
+      ...cloned,
+    }
+  }
+  else {
     return value
+  }
 }