fix(browser): support coverage.reportsDirectory with multiple directories (#5056)

Author: AriPerkkio

packages/browser/src/node/index.ts

@@ -1,9 +1,10 @@
 import { fileURLToPath } from 'node:url'
 
-import { resolve } from 'node:path'
+import { basename, resolve } from 'pathe'
 import sirv from 'sirv'
 import type { Plugin } from 'vite'
 import type { WorkspaceProject } from 'vitest/node'
+import { coverageConfigDefaults } from 'vitest/config'
 import { injectVitestModule } from './esmInjector'
 
 export default (project: WorkspaceProject, base = '/'): Plugin[] => {
@@ -36,6 +37,19 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
             },
           }),
         )
+
+        const coverageFolder = resolveCoverageFolder(project)
+        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`)
+
+        coverageFolder && server.middlewares.use(coveragePath!, sirv(coverageFolder[0], {
+          single: true,
+          dev: true,
+          setHeaders: (res) => {
+            res.setHeader('Cache-Control', 'public,max-age=0,must-revalidate')
+          },
+        }))
       },
     },
     {
@@ -114,3 +128,33 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
     },
   ]
 }
+
+function resolveCoverageFolder(project: WorkspaceProject) {
+  const options = project.ctx.config
+  const htmlReporter = options.coverage?.enabled
+    ? 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 || 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}/`]
+}