From 86fad4b42603a5d1c4935b82656d2fd8d2d44bf1 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Sun, 15 Feb 2026 12:14:43 +0900
Subject: [PATCH] fix: fix ui mode / html reporter and coverage integration
 (#9626)

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 docs/config/coverage.md                       | 14 ++++-
 docs/guide/coverage.md                        |  6 +-
 packages/browser/src/node/plugin.ts           | 57 ++-----------------
 packages/ui/client/components/Coverage.vue    |  6 +-
 packages/ui/client/composables/attachments.ts |  2 +-
 packages/ui/client/composables/navigation.ts  | 19 +------
 packages/ui/client/pages/index.vue            |  3 -
 packages/ui/node/index.ts                     | 56 ++----------------
 packages/ui/node/reporter.ts                  | 10 ++++
 .../vitest/src/node/config/resolveConfig.ts   | 25 ++++++++
 .../vitest/src/node/config/serializeConfig.ts |  9 +--
 packages/vitest/src/node/core.ts              | 10 ++--
 packages/vitest/src/node/types/coverage.ts    |  8 +++
 packages/vitest/src/runtime/config.ts         |  4 +-
 test/config/test/public.test.ts               | 55 ++++++++++++++++++
 test/ui/test/html-report.spec.ts              | 29 +++-------
 test/ui/test/ui.spec.ts                       |  2 +-
 17 files changed, 145 insertions(+), 170 deletions(-)

diff --git a/docs/config/coverage.md b/docs/config/coverage.md
index 6765eb0eb..6406a0496 100644
--- a/docs/config/coverage.md
+++ b/docs/config/coverage.md
@@ -89,8 +89,6 @@ Vitest will delete this directory before running tests if `coverage.clean` is en
 
 Directory to write coverage report to.
 
-To preview the coverage report in the output of [HTML reporter](/guide/reporters.html#html-reporter), this option must be set as a sub-directory of the html report directory (for example `./html/coverage`).
-
 ## coverage.reporter
 
 - **Type:** `string | string[] | [string, {}][]`
@@ -395,3 +393,15 @@ Concurrency limit used when processing the coverage results.
 - **CLI:** `--coverage.customProviderModule=<path or module name>`
 
 Specifies the module name or path for the custom coverage provider module. See [Guide - Custom Coverage Provider](/guide/coverage#custom-coverage-provider) for more information.
+
+## coverage.htmlDir
+
+- **Type:** `string`
+- **Default:** Automatically inferred from `html`, `html-spa`, or `lcov` coverage reporters
+- **CLI:** `--coverage.htmlDir=<path>`
+
+Directory of HTML coverage output to be served in [Vitest UI](/guide/ui) and [HTML reporter](/guide/reporters.html#html-reporter).
+
+This is automatically configured when using builtin coverage reporters that produce HTML output (`html`, `html-spa`, and `lcov`). Use this option to override with a custom coverage reporting location when using custom coverage reporters.
+
+Note that setting this option does not change where coverage HTML report is generated. Configure the `coverage.reporter` option to change the directory instead.
diff --git a/docs/guide/coverage.md b/docs/guide/coverage.md
index c317853ed..faaa47424 100644
--- a/docs/guide/coverage.md
+++ b/docs/guide/coverage.md
@@ -499,11 +499,9 @@ If code coverage generation is slow on your project, see [Profiling Test Perform
 
 ## Vitest UI
 
-You can check your coverage report in [Vitest UI](/guide/ui).
+You can check your coverage report in [Vitest UI](/guide/ui) and [HTML reporter](/guide/reporters.html#html-reporter).
 
-Vitest UI will enable coverage report when it is enabled explicitly and the html coverage reporter is present, otherwise it will not be available:
-- enable `coverage.enabled=true` in your configuration file or run Vitest with `--coverage.enabled=true` flag
-- add `html` to the `coverage.reporter` list: you can also enable `subdir` option to put coverage report in a subdirectory
+This is integrated with builtin coverage reporters with HTML output (`html`, `html-spa`, and `lcov` reporters). `html` reporter is enabled by default and this works out of the box. To integrate with custom reporters, you can configure [`coverage.htmlDir`](/config/coverage#coverage-htmldir).
 
 <img alt="html coverage activation in Vitest UI" img-light src="/vitest-ui-show-coverage-light.png">
 <img alt="html coverage activation in Vitest UI" img-dark src="/vitest-ui-show-coverage-dark.png">
diff --git a/packages/browser/src/node/plugin.ts b/packages/browser/src/node/plugin.ts
index 5380a76e7..91ed57831 100644
--- a/packages/browser/src/node/plugin.ts
+++ b/packages/browser/src/node/plugin.ts
@@ -1,15 +1,13 @@
 import type { HtmlTagDescriptor } from 'vite'
 import type { Plugin } from 'vitest/config'
-import type { Vitest } from 'vitest/node'
 import type { ParentBrowserProject } from './projectParent'
 import { createReadStream, readFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { dynamicImportPlugin } from '@vitest/mocker/node'
 import { toArray } from '@vitest/utils/helpers'
 import MagicString from 'magic-string'
-import { basename, dirname, join, resolve } from 'pathe'
+import { dirname, join, resolve } from 'pathe'
 import sirv from 'sirv'
-import { coverageConfigDefaults } from 'vitest/config'
 import {
   isFileServingAllowed,
   isValidApiRequest,
@@ -63,18 +61,12 @@ export default (parentServer: ParentBrowserProject, base = '/'): Plugin[] => {
           },
         )
 
-        const coverageFolder = resolveCoverageFolder(parentServer.vitest)
-        const coveragePath = coverageFolder ? coverageFolder[1] : undefined
-        if (coveragePath && base === coveragePath) {
-          throw new Error(
-            `The ui base path and the coverage path cannot be the same: ${base}, change coverage.reportsDirectory`,
-          )
-        }
-
-        if (coverageFolder) {
+        // Serve coverage HTML at ./coverage if configured
+        const coverageHtmlDir = parentServer.vitest.config.coverage?.htmlDir
+        if (coverageHtmlDir) {
           server.middlewares.use(
-            coveragePath!,
-            sirv(coverageFolder[0], {
+            '/__vitest_test__/coverage',
+            sirv(coverageHtmlDir, {
               single: true,
               dev: true,
               setHeaders: (res) => {
@@ -604,43 +596,6 @@ function getRequire() {
   return _require
 }
 
-function resolveCoverageFolder(vitest: Vitest) {
-  const options = vitest.config
-  const coverageOptions = vitest._coverageOptions
-  const htmlReporter = coverageOptions?.enabled
-    ? toArray(options.coverage.reporter).find((reporter) => {
-        if (typeof reporter === 'string') {
-          return reporter === 'html'
-        }
-
-        return reporter[0] === 'html'
-      })
-    : undefined
-
-  if (!htmlReporter) {
-    return undefined
-  }
-
-  // reportsDirectory not resolved yet
-  const root = resolve(
-    options.root || process.cwd(),
-    coverageOptions.reportsDirectory || coverageConfigDefaults.reportsDirectory,
-  )
-
-  const subdir
-    = Array.isArray(htmlReporter)
-      && htmlReporter.length > 1
-      && 'subdir' in htmlReporter[1]
-      ? htmlReporter[1].subdir
-      : undefined
-
-  if (!subdir || typeof subdir !== 'string') {
-    return [root, `/${basename(root)}/`]
-  }
-
-  return [resolve(root, subdir), `/${basename(root)}/${subdir}/`]
-}
-
 const postfixRE = /[?#].*$/
 function cleanUrl(url: string): string {
   return url.replace(postfixRE, '')
diff --git a/packages/ui/client/components/Coverage.vue b/packages/ui/client/components/Coverage.vue
index a26a84844..34bc59739 100644
--- a/packages/ui/client/components/Coverage.vue
+++ b/packages/ui/client/components/Coverage.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import DetailsHeaderButtons from '~/components/DetailsHeaderButtons.vue'
 import { browserState } from '~/composables/client'
-
-defineProps<{
-  src: string
-}>()
 </script>
 
 <template>
@@ -15,7 +11,7 @@ defineProps<{
       <DetailsHeaderButtons v-if="browserState" />
     </div>
     <div flex-auto py-1 bg-white>
-      <iframe id="vitest-ui-coverage" :src="src" />
+      <iframe id="vitest-ui-coverage" src="./coverage/index.html" />
     </div>
   </div>
 </template>
diff --git a/packages/ui/client/composables/attachments.ts b/packages/ui/client/composables/attachments.ts
index 93fbb4419..3ed41a1cc 100644
--- a/packages/ui/client/composables/attachments.ts
+++ b/packages/ui/client/composables/attachments.ts
@@ -8,7 +8,7 @@ export function getAttachmentUrl(attachment: TestAttachment): string {
   if (attachment.path) {
     if (isReport) {
       // html reporter copies attachments to /data/ folder
-      return `/data/${basename(attachment.path)}`
+      return `./data/${basename(attachment.path)}`
     }
     return `/__vitest_attachment__?path=${encodeURIComponent(attachment.path)}&contentType=${contentType}&token=${(window as any).VITEST_API_TOKEN}`
   }
diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts
index 44e5487d5..550a219d7 100644
--- a/packages/ui/client/composables/navigation.ts
+++ b/packages/ui/client/composables/navigation.ts
@@ -17,7 +17,7 @@ export const coverageConfigured = computed(() => coverage.value?.enabled)
 export const coverageEnabled = computed(() => {
   return (
     coverageConfigured.value
-    && !!coverage.value?.htmlReporter
+    && !!coverage.value?.htmlDir
   )
 })
 export const mainSizes = useLocalStorage<[left: number, right: number]>(
@@ -71,23 +71,6 @@ export const panels = reactive({
   },
 })
 
-// TODO
-// For html report preview, "coverage.reportsDirectory" must be explicitly set as a subdirectory of html report.
-// Handling other cases seems difficult, so this limitation is mentioned in the documentation for now.
-export const coverageUrl = computed(() => {
-  if (coverageEnabled.value) {
-    const idx = coverage.value!.reportsDirectory.lastIndexOf('/')
-    const htmlReporterSubdir = coverage.value!.htmlReporter?.subdir
-    return htmlReporterSubdir
-      ? `/${coverage.value!.reportsDirectory.slice(idx + 1)}/${
-        htmlReporterSubdir
-      }/index.html`
-      : `/${coverage.value!.reportsDirectory.slice(idx + 1)}/index.html`
-  }
-
-  return undefined
-})
-
 watch(
   testRunState,
   (state) => {
diff --git a/packages/ui/client/pages/index.vue b/packages/ui/client/pages/index.vue
index b162df9f7..060da4dbb 100644
--- a/packages/ui/client/pages/index.vue
+++ b/packages/ui/client/pages/index.vue
@@ -12,7 +12,6 @@ import Navigation from '~/components/Navigation.vue'
 import ProgressBar from '~/components/ProgressBar.vue'
 import { browserState } from '~/composables/client'
 import {
-  coverageUrl,
   coverageVisible,
   detailSizes,
   detailsPanelVisible,
@@ -97,7 +96,6 @@ function allowBrowserEvents() {
           <Coverage
             v-else-if="coverageVisible"
             key="coverage"
-            :src="coverageUrl!"
           />
           <FileDetails v-else key="details" />
         </transition>
@@ -127,7 +125,6 @@ function allowBrowserEvents() {
                   <Coverage
                     v-else-if="coverageVisible"
                     key="coverage"
-                    :src="coverageUrl!"
                   />
                   <FileDetails v-else key="details" />
                 </div>
diff --git a/packages/ui/node/index.ts b/packages/ui/node/index.ts
index bc06899b9..bd5bdaba5 100644
--- a/packages/ui/node/index.ts
+++ b/packages/ui/node/index.ts
@@ -2,11 +2,9 @@ import type { Plugin } from 'vite'
 import type { Vitest } from 'vitest/node'
 import fs from 'node:fs'
 import { fileURLToPath } from 'node:url'
-import { toArray } from '@vitest/utils/helpers'
-import { basename, resolve } from 'pathe'
+import { join, resolve } from 'pathe'
 import sirv from 'sirv'
 import c from 'tinyrainbow'
-import { coverageConfigDefaults } from 'vitest/config'
 import { isFileServingAllowed, isValidApiRequest } from 'vitest/node'
 import { version } from '../package.json'
 
@@ -29,18 +27,13 @@ export default (ctx: Vitest): Plugin => {
       handler(server) {
         const uiOptions = ctx.config
         const base = uiOptions.uiBase
-        const coverageFolder = resolveCoverageFolder(ctx)
-        const coveragePath = coverageFolder ? coverageFolder[1] : undefined
-        if (coveragePath && base === coveragePath) {
-          throw new Error(
-            `The ui base path and the coverage path cannot be the same: ${base}, change coverage.reportsDirectory`,
-          )
-        }
 
-        if (coverageFolder) {
+        // Serve coverage HTML at ./coverage if configured
+        const coverageHtmlDir = ctx.config.coverage?.htmlDir
+        if (coverageHtmlDir) {
           server.middlewares.use(
-            coveragePath!,
-            sirv(coverageFolder[0], {
+            join(base, 'coverage'),
+            sirv(coverageHtmlDir, {
               single: true,
               dev: true,
               setHeaders: (res) => {
@@ -126,40 +119,3 @@ export default (ctx: Vitest): Plugin => {
     },
   }
 }
-
-function resolveCoverageFolder(ctx: Vitest) {
-  const options = ctx.config
-  const htmlReporter
-    = options.api?.port && options.coverage?.enabled
-      ? toArray(options.coverage.reporter).find((reporter) => {
-          if (typeof reporter === 'string') {
-            return reporter === 'html'
-          }
-
-          return reporter[0] === 'html'
-        })
-      : undefined
-
-  if (!htmlReporter) {
-    return undefined
-  }
-
-  // reportsDirectory not resolved yet
-  const root = resolve(
-    ctx.config?.root || options.root || process.cwd(),
-    options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory,
-  )
-
-  const subdir
-    = Array.isArray(htmlReporter)
-      && htmlReporter.length > 1
-      && 'subdir' in htmlReporter[1]
-      ? htmlReporter[1].subdir
-      : undefined
-
-  if (!subdir || typeof subdir !== 'string') {
-    return [root, `/${basename(root)}/`]
-  }
-
-  return [resolve(root, subdir), `/${basename(root)}/${subdir}/`]
-}
diff --git a/packages/ui/node/reporter.ts b/packages/ui/node/reporter.ts
index 6da18ca58..7c5a03483 100644
--- a/packages/ui/node/reporter.ts
+++ b/packages/ui/node/reporter.ts
@@ -154,4 +154,14 @@ export default class HTMLReporter implements Reporter {
       )}${c.dim(' to see the test results.')}`,
     )
   }
+
+  async onFinishedReportCoverage(): Promise<void> {
+    if (this.ctx.config.coverage.enabled && this.ctx.config.coverage.htmlDir) {
+      const coverageHtmlDir = this.ctx.config.coverage.htmlDir
+      const destCoverageDir = resolve(this.reporterDir, 'coverage')
+      await fs.rm(destCoverageDir, { recursive: true, force: true })
+      await fs.mkdir(destCoverageDir, { recursive: true })
+      await fs.cp(coverageHtmlDir, destCoverageDir, { recursive: true })
+    }
+  }
 }
diff --git a/packages/vitest/src/node/config/resolveConfig.ts b/packages/vitest/src/node/config/resolveConfig.ts
index d1cd29232..3aa64fc39 100644
--- a/packages/vitest/src/node/config/resolveConfig.ts
+++ b/packages/vitest/src/node/config/resolveConfig.ts
@@ -434,6 +434,31 @@ export function resolveConfig(
         `You cannot set "coverage.reportsDirectory" as ${reportsDirectory}. Vitest needs to be able to remove this directory before test run`,
       )
     }
+
+    if (resolved.coverage.htmlDir) {
+      resolved.coverage.htmlDir = resolve(
+        resolved.root,
+        resolved.coverage.htmlDir,
+      )
+    }
+
+    // infer default htmlDir based on builtin reporter's html output location
+    if (!resolved.coverage.htmlDir) {
+      const htmlReporter = resolved.coverage.reporter.find(([name]) => name === 'html' || name === 'html-spa')
+      if (htmlReporter) {
+        const [, options] = htmlReporter
+        const subdir = options && typeof options === 'object' && 'subdir' in options && typeof options.subdir === 'string'
+          ? options.subdir
+          : undefined
+        resolved.coverage.htmlDir = resolve(reportsDirectory, subdir || '.')
+      }
+      else {
+        const lcovReporter = resolved.coverage.reporter.find(([name]) => name === 'lcov')
+        if (lcovReporter) {
+          resolved.coverage.htmlDir = resolve(reportsDirectory, 'lcov-report')
+        }
+      }
+    }
   }
 
   if (resolved.coverage.enabled && resolved.coverage.provider === 'custom' && resolved.coverage.customProviderModule) {
diff --git a/packages/vitest/src/node/config/serializeConfig.ts b/packages/vitest/src/node/config/serializeConfig.ts
index 0516afacb..a40f289ec 100644
--- a/packages/vitest/src/node/config/serializeConfig.ts
+++ b/packages/vitest/src/node/config/serializeConfig.ts
@@ -48,21 +48,14 @@ export function serializeConfig(project: TestProject): SerializedConfig {
     snapshotEnvironment: config.snapshotEnvironment,
     passWithNoTests: config.passWithNoTests,
     coverage: ((coverage) => {
-      const htmlReporter = coverage.reporter.find(([reporterName]) => reporterName === 'html') as [
-        'html',
-        { subdir?: string },
-      ] | undefined
-      const subdir = htmlReporter && htmlReporter[1]?.subdir
       return {
         reportsDirectory: coverage.reportsDirectory,
         provider: coverage.provider,
         enabled: coverage.enabled,
-        htmlReporter: htmlReporter
-          ? { subdir }
-          : undefined,
         customProviderModule: 'customProviderModule' in coverage
           ? coverage.customProviderModule
           : undefined,
+        htmlDir: coverage.htmlDir,
       }
     })(config.coverage),
     fakeTimers: config.fakeTimers,
diff --git a/packages/vitest/src/node/core.ts b/packages/vitest/src/node/core.ts
index 71d333894..100a6d1ae 100644
--- a/packages/vitest/src/node/core.ts
+++ b/packages/vitest/src/node/core.ts
@@ -22,7 +22,6 @@ import { deepClone, deepMerge, nanoid, noop, toArray } from '@vitest/utils/helpe
 import { join, normalize, relative } from 'pathe'
 import { isRunnableDevEnvironment } from 'vite'
 import { version } from '../../package.json' with { type: 'json' }
-import { WebSocketReporter } from '../api/setup'
 import { distDir } from '../paths'
 import { wildcardPatternToRegExp } from '../utils/base'
 import { NativeModuleRunner } from '../utils/nativeModuleRunner'
@@ -1379,10 +1378,13 @@ export class Vitest {
 
     if (this.coverageProvider) {
       await this.coverageProvider.reportCoverage(coverage, { allTestsRun })
-      // notify coverage iframe reload
+      // notify builtin ui and html reporter after coverage html is generated
       for (const reporter of this.reporters) {
-        if (reporter instanceof WebSocketReporter) {
-          reporter.onFinishedReportCoverage()
+        if (
+          'onFinishedReportCoverage' in reporter
+          && typeof reporter.onFinishedReportCoverage === 'function'
+        ) {
+          await reporter.onFinishedReportCoverage()
         }
       }
     }
diff --git a/packages/vitest/src/node/types/coverage.ts b/packages/vitest/src/node/types/coverage.ts
index a148fc090..13fe8a661 100644
--- a/packages/vitest/src/node/types/coverage.ts
+++ b/packages/vitest/src/node/types/coverage.ts
@@ -122,6 +122,7 @@ export type ResolvedCoverageOptions<T extends CoverageProviderName = CoveragePro
   = CoverageOptions<T>
     & Required<Pick<CoverageOptions<T>, FieldsWithDefaultValues>> & { // Resolved fields which may have different typings as public configuration API has
       reporter: CoverageReporterWithOptions[]
+      htmlDir?: string
     }
 
 export interface BaseCoverageOptions {
@@ -266,6 +267,13 @@ export interface BaseCoverageOptions {
    * @default []
    */
   ignoreClassMethods?: string[]
+
+  /**
+   * Directory of HTML coverage output to be served in UI mode and HTML reporter.
+   * This is automatically configured for builtin reporter with html output (`html`, `html-spa`, and `lcov` reporters).
+   * Use this option to override with custom coverage reporting location.
+   */
+  htmlDir?: string
 }
 
 export interface CoverageIstanbulOptions extends BaseCoverageOptions {}
diff --git a/packages/vitest/src/runtime/config.ts b/packages/vitest/src/runtime/config.ts
index 07f2021a2..521a3b246 100644
--- a/packages/vitest/src/runtime/config.ts
+++ b/packages/vitest/src/runtime/config.ts
@@ -150,9 +150,7 @@ export interface SerializedConfig {
 export interface SerializedCoverageConfig {
   provider: 'istanbul' | 'v8' | 'custom' | undefined
   reportsDirectory: string
-  htmlReporter: {
-    subdir: string | undefined
-  } | undefined
+  htmlDir: string | undefined
   enabled: boolean
   customProviderModule: string | undefined
 }
diff --git a/test/config/test/public.test.ts b/test/config/test/public.test.ts
index 59c972f28..56ac3b8a1 100644
--- a/test/config/test/public.test.ts
+++ b/test/config/test/public.test.ts
@@ -1,3 +1,4 @@
+import type { BaseCoverageOptions } from 'vitest/node'
 import { resolve } from 'pathe'
 import { expect, test } from 'vitest'
 import { resolveConfig } from 'vitest/node'
@@ -62,3 +63,57 @@ test('default value changes of coverage.exclude do not reflect to test.exclude',
   expect(vitestConfig.coverage.exclude).toContain('**/custom-exclude/**')
   expect(vitestConfig.coverage.exclude).toContain('**/example.test.ts')
 })
+
+test.for([
+  {
+    options: {},
+    expected: 'coverage',
+  },
+  {
+    options: { reporter: ['html'] },
+    expected: 'coverage',
+  },
+  {
+    options: { reporter: [['html', {}]] },
+    expected: 'coverage',
+  },
+  {
+    options: { reporter: [['html-spa', {}]] },
+    expected: 'coverage',
+  },
+  {
+    options: { reporter: [['html', { subdir: 'custom-subdir' }]] },
+    expected: 'coverage/custom-subdir',
+  },
+  {
+    options: { reporter: [['html', {}]], reportsDirectory: 'my-coverage' },
+    expected: 'my-coverage',
+  },
+  {
+    options: { reporter: [['html', { subdir: 'custom-subdir' }]], reportsDirectory: 'my-coverage' },
+    expected: 'my-coverage/custom-subdir',
+  },
+  {
+    options: { reporter: ['lcov'] },
+    expected: 'coverage/lcov-report',
+  },
+  {
+    options: { reporter: [['text', {}]] },
+    expected: undefined,
+  },
+  {
+    options: { htmlDir: 'custom-html-dir' },
+    expected: 'custom-html-dir',
+  },
+] satisfies {
+  options: BaseCoverageOptions
+  expected?: string
+}[])('coverage.htmlDir inference: $options', async ({ options, expected }) => {
+  const { vitestConfig } = await resolveConfig({
+    config: false,
+    coverage: { enabled: true, ...options },
+  })
+  expect(vitestConfig.coverage.htmlDir).toBe(
+    expected && resolve(vitestConfig.root, expected),
+  )
+})
diff --git a/test/ui/test/html-report.spec.ts b/test/ui/test/html-report.spec.ts
index 7de4225b4..f215c4696 100644
--- a/test/ui/test/html-report.spec.ts
+++ b/test/ui/test/html-report.spec.ts
@@ -6,7 +6,7 @@ import { preview } from 'vite'
 import { startVitest } from 'vitest/node'
 
 const port = 9001
-const pageUrl = `http://localhost:${port}/`
+const pageUrl = `http://localhost:${port}/custom/base/`
 
 test.describe('html report', () => {
   let previewServer: PreviewServer
@@ -24,8 +24,6 @@ test.describe('html report', () => {
         reporters: 'html',
         coverage: {
           enabled: true,
-          reportsDirectory: 'html/coverage',
-          reporter: ['html'],
         },
       },
       {},
@@ -37,27 +35,14 @@ test.describe('html report', () => {
 
     // run vite preview server
     previewServer = await preview({
+      base: '/custom/base/',
       build: { outDir: 'html' },
       preview: { port, strictPort: true },
     })
   })
 
   test.afterAll(async () => {
-    await new Promise<void>((resolve, reject) => {
-      // if there is no preview server, `startVitest` failed already
-      if (!previewServer) {
-        resolve()
-        return
-      }
-      previewServer.httpServer.close((err) => {
-        if (err) {
-          reject(err)
-        }
-        else {
-          resolve()
-        }
-      })
-    })
+    await previewServer?.close()
   })
 
   test('basic', async ({ page }) => {
@@ -168,7 +153,9 @@ test.describe('html report', () => {
       await expect(annotation).toContainText('notice')
       await expect(annotation).toContainText('fixtures/annotated.test.ts:19:9')
       await expect(annotation.getByRole('link')).toHaveAttribute('href', /data\/\w+/)
-      await expect(annotation.getByRole('img')).toHaveAttribute('src', /data\/\w+/)
+      const img = annotation.getByRole('img')
+      await expect(img).toHaveAttribute('src', /data\/\w+/)
+      await expect(img).not.toHaveJSProperty('naturalWidth', 0)
     })
 
     await test.step('annotated with body', async () => {
@@ -246,7 +233,9 @@ test.describe('html report', () => {
       await expect(artifact).toContainText('fixtures-browser/visual-regression.test.ts:13:3')
       await expect(artifact.getByRole('tablist')).toHaveText('Reference')
       await expect(artifact.getByRole('tabpanel').getByRole('link')).toHaveAttribute('href', /data\/\w+\.png/)
-      await expect(artifact.getByRole('tabpanel').getByRole('img')).toHaveAttribute('src', /data\/\w+\.png/)
+      const vrImg = artifact.getByRole('tabpanel').getByRole('img')
+      await expect(vrImg).toHaveAttribute('src', /data\/\w+\.png/)
+      await expect(vrImg).not.toHaveJSProperty('naturalWidth', 0)
     })
   })
 })
diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index 47ba40e13..a741e6035 100644
--- a/test/ui/test/ui.spec.ts
+++ b/test/ui/test/ui.spec.ts
@@ -19,7 +19,7 @@ test.describe('ui', () => {
       ui: true,
       open: false,
       api: { port },
-      coverage: { enabled: true, reporter: ['html'] },
+      coverage: { enabled: true },
       reporters: [],
     }, {}, {
       stdout,
-- 
2.51.2