feat: implement istanbul coverage support for browser testing (#3040)

Co-authored-by: AriPerkkio <ari.perkkio@gmail.com>

Author: sheremet-va

packages/browser/src/client/main.ts

@@ -57,6 +57,8 @@ ws.addEventListener('open', async () => {
   const { getSafeTimers } = await importId('vitest/utils') as typeof import('vitest/utils')
   const safeRpc = createSafeRpc(client, getSafeTimers)
 
+  // @ts-expect-error untyped global for internal use
+  globalThis.__vitest_browser__ = true
   // @ts-expect-error mocking vitest apis
   globalThis.__vitest_worker__ = {
     config,
@@ -82,11 +84,20 @@ async function runTests(paths: string[], config: any) {
   const viteClientPath = '/@vite/client'
   await import(viteClientPath)
 
-  const { startTests, setupCommonEnv, setupSnapshotEnvironment } = await importId('vitest/browser') as typeof import('vitest/browser')
+  const {
+    startTests,
+    setupCommonEnv,
+    setupSnapshotEnvironment,
+    takeCoverageInsideWorker,
+  } = await importId('vitest/browser') as typeof import('vitest/browser')
+
+  const executor = {
+    executeId: (id: string) => importId(id),
+  }
 
   if (!runner) {
     const { VitestTestRunner } = await importId('vitest/runners') as typeof import('vitest/runners')
-    const BrowserRunner = createBrowserRunner(VitestTestRunner)
+    const BrowserRunner = createBrowserRunner(VitestTestRunner, { takeCoverage: () => takeCoverageInsideWorker(config.coverage, executor) })
     runner = new BrowserRunner({ config, browserHashMap })
   }
 
@@ -104,7 +115,8 @@ async function runTests(paths: string[], config: any) {
     const now = `${new Date().getTime()}`
     files.forEach(i => browserHashMap.set(i, now))
 
-    await startTests(files, runner)
+    for (const file of files)
+      await startTests([file], runner)
   }
   finally {
     await rpcDone()

packages/browser/src/client/runner.ts

@@ -7,7 +7,11 @@ interface BrowserRunnerOptions {
   browserHashMap: Map<string, string>
 }
 
-export function createBrowserRunner(original: any) {
+interface CoverageHandler {
+  takeCoverage: () => Promise<unknown>
+}
+
+export function createBrowserRunner(original: any, coverageModule: CoverageHandler | null) {
   return class BrowserTestRunner extends original {
     public config: ResolvedConfig
     hashMap = new Map<string, string>()
@@ -25,6 +29,12 @@ export function createBrowserRunner(original: any) {
       })
     }
 
+    async onAfterRunSuite() {
+      await super.onAfterRunSuite?.()
+      const coverage = await coverageModule?.takeCoverage?.()
+      await rpc().onAfterSuiteRun({ coverage })
+    }
+
     onCollected(files: File[]): unknown {
       return rpc().onCollected(files)
     }

packages/browser/src/node/index.ts

@@ -18,6 +18,11 @@ export default (base = '/'): Plugin[] => {
     {
       enforce: 'pre',
       name: 'vitest:browser',
+      async config(viteConfig) {
+        // Enables using ignore hint for coverage providers with @preserve keyword
+        viteConfig.esbuild ||= {}
+        viteConfig.esbuild.legalComments = 'inline'
+      },
       async configureServer(server) {
         server.middlewares.use(
           base,

packages/coverage-c8/rollup.config.js

@@ -10,6 +10,7 @@ import pkg from './package.json'
 
 const entries = {
   index: 'src/index.ts',
+  provider: 'src/provider.ts',
 }
 
 const external = [

packages/coverage-c8/src/index.ts

@@ -1,6 +1,11 @@
-export * from './takeCoverage'
+import * as coverage from './takeCoverage'
 
-export async function getProvider() {
-  const { C8CoverageProvider } = await import('./provider')
-  return new C8CoverageProvider()
+export default {
+  ...coverage,
+  async getProvider() {
+    // to not bundle the provider
+    const name = './provider.js'
+    const { C8CoverageProvider } = await import(name) as typeof import('./provider')
+    return new C8CoverageProvider()
+  },
 }

packages/coverage-istanbul/rollup.config.js

@@ -10,6 +10,7 @@ import pkg from './package.json'
 
 const entries = {
   index: 'src/index.ts',
+  provider: 'src/provider.ts',
 }
 
 const external = [

packages/coverage-istanbul/src/index.ts

@@ -1,7 +1,9 @@
 import { COVERAGE_STORE_KEY } from './constants'
 
 export async function getProvider() {
-  const { IstanbulCoverageProvider } = await import('./provider')
+  // to not bundle the provider
+  const providerPath = './provider.js'
+  const { IstanbulCoverageProvider } = await import(providerPath) as typeof import('./provider')
   return new IstanbulCoverageProvider()
 }
 
@@ -15,3 +17,8 @@ export function takeCoverage() {
 
   return coverage
 }
+
+export default {
+  getProvider,
+  takeCoverage,
+}

packages/vitest/src/api/setup.ts

@@ -46,6 +46,9 @@ export function setup(ctx: Vitest, server?: ViteDevServer) {
           ctx.state.updateTasks(packs)
           await ctx.report('onTaskUpdate', packs)
         },
+        onAfterSuiteRun(meta) {
+          ctx.coverageProvider?.onAfterSuiteRun(meta)
+        },
         getFiles() {
           return ctx.state.getFiles()
         },

packages/vitest/src/api/types.ts

@@ -1,5 +1,5 @@
 import type { TransformResult } from 'vite'
-import type { File, ModuleGraphData, Reporter, ResolvedConfig, SnapshotResult, TaskResultPack, UserConsoleLog } from '../types'
+import type { AfterSuiteRunMeta, File, ModuleGraphData, Reporter, ResolvedConfig, SnapshotResult, TaskResultPack, UserConsoleLog } from '../types'
 
 export interface TransformResultWithSource extends TransformResult {
   source?: string
@@ -8,6 +8,7 @@ export interface TransformResultWithSource extends TransformResult {
 export interface WebSocketHandlers {
   onCollected(files?: File[]): Promise<void>
   onTaskUpdate(packs: TaskResultPack[]): void
+  onAfterSuiteRun(meta: AfterSuiteRunMeta): void
   onDone(name: string): void
   sendLog(log: UserConsoleLog): void
   getFiles(): File[]

packages/vitest/src/browser.ts

@@ -1,3 +1,4 @@
 export { startTests } from '@vitest/runner'
 export { setupCommonEnv } from './runtime/setup.common'
 export { setupSnapshotEnvironment } from './integrations/snapshot/env'
+export { takeCoverageInsideWorker, stopCoverageInsideWorker, getCoverageProvider, startCoverageInsideWorker } from './integrations/coverage'