fix(browser): add instance validation to resolve coverage error (#7231)

Co-authored-by: Ari Perkkiö <ari.perkkio@gmail.com>

Author: DevJoaoLopes

docs/guide/debugging.md

@@ -58,8 +58,8 @@ export default defineConfig({
     inspectBrk: true,
     fileParallelism: false,
     browser: {
-      name: 'chromium',
       provider: 'playwright',
+      instances: [{ browser: 'chromium' }]
     },
   },
 })

packages/vitest/src/node/config/resolveConfig.ts

@@ -251,14 +251,22 @@ export function resolveConfig(
     }
   }
 
+  const playwrightChromiumOnly = browser.provider === 'playwright' && (browser.name === 'chromium' || browser.instances?.every(i => i.browser === 'chromium'))
+
   // Browser-mode "Playwright + Chromium" only features:
-  if (browser.enabled && !(browser.provider === 'playwright' && browser.name === 'chromium')) {
-    const browserConfig = { browser: { provider: browser.provider, name: browser.name } }
+  if (browser.enabled && !playwrightChromiumOnly) {
+    const browserConfig = {
+      browser: {
+        provider: browser.provider,
+        name: browser.name,
+        instances: browser.instances,
+      },
+    }
 
     if (resolved.coverage.enabled && resolved.coverage.provider === 'v8') {
       throw new Error(
         `@vitest/coverage-v8 does not work with\n${JSON.stringify(browserConfig, null, 2)}\n`
-        + `\nUse either:\n${JSON.stringify({ browser: { provider: 'playwright', name: 'chromium' } }, null, 2)}`
+        + `\nUse either:\n${JSON.stringify({ browser: { provider: 'playwright', instances: [{ browser: 'chromium' }] } }, null, 2)}`
         + `\n\n...or change your coverage provider to:\n${JSON.stringify({ coverage: { provider: 'istanbul' } }, null, 2)}\n`,
       )
     }
@@ -268,7 +276,7 @@ export function resolveConfig(
 
       throw new Error(
         `${inspectOption} does not work with\n${JSON.stringify(browserConfig, null, 2)}\n`
-        + `\nUse either:\n${JSON.stringify({ browser: { provider: 'playwright', name: 'chromium' } }, null, 2)}`
+        + `\nUse either:\n${JSON.stringify({ browser: { provider: 'playwright', instances: [{ browser: 'chromium' }] } }, null, 2)}`
         + `\n\n...or disable ${inspectOption}\n`,
       )
     }

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

@@ -93,7 +93,7 @@ export interface BrowserConfigOptions {
 
   /**
    * Name of the browser
-   * @deprecated use `configs` instead. if both are defined, this will filter `configs` by name.
+   * @deprecated use `instances` instead. if both are defined, this will filter `instances` by name.
    */
   name?: string
 
@@ -118,7 +118,7 @@ export interface BrowserConfigOptions {
    *
    * @example
    * { playwright: { launch: { devtools: true } }
-   * @deprecated use `configs` instead
+   * @deprecated use `instances` instead
    */
   providerOptions?: BrowserProviderOptions
 

test/config/fixtures/workspace/browser/workspace-with-browser.ts

@@ -7,7 +7,7 @@ export default defineWorkspace([
       browser: {
          enabled: true,
          provider: 'webdriverio',
-         name: 'chrome',
+         instances: [{ browser: 'chrome' }]
       },
     }
   }

test/config/test/failures.test.ts

@@ -111,7 +111,11 @@ Use either:
 {
   "browser": {
     "provider": "playwright",
-    "name": "chromium"
+    "instances": [
+      {
+        "browser": "chromium"
+      }
+    ]
   }
 }
 
@@ -122,7 +126,7 @@ Use either:
   }
 })
 
-test('v8 coverage provider throws when not playwright + chromium', async () => {
+test('v8 coverage provider throws when not playwright + chromium (browser.name)', async () => {
   for (const { provider, name } of browsers) {
     if (provider === 'playwright' && name === 'chromium') {
       continue
@@ -152,7 +156,64 @@ Use either:
 {
   "browser": {
     "provider": "playwright",
-    "name": "chromium"
+    "instances": [
+      {
+        "browser": "chromium"
+      }
+    ]
+  }
+}
+
+...or change your coverage provider to:
+{
+  "coverage": {
+    "provider": "istanbul"
+  }
+}
+`,
+    )
+  }
+})
+
+test('v8 coverage provider throws when not playwright + chromium (browser.instances)', async () => {
+  for (const { provider, name } of browsers) {
+    if (provider === 'playwright' && name === 'chromium') {
+      continue
+    }
+
+    const { stderr } = await runVitest({
+      coverage: {
+        enabled: true,
+      },
+      browser: {
+        enabled: true,
+        provider,
+        instances: [{ browser: name }],
+      },
+    })
+
+    expect(stderr).toMatch(
+      `Error: @vitest/coverage-v8 does not work with
+{
+  "browser": {
+    "provider": "${provider}",
+    "instances": [
+      {
+        "browser": "${name}"
+      }
+    ]
+  }
+}
+
+Use either:
+{
+  "browser": {
+    "provider": "playwright",
+    "instances": [
+      {
+        "browser": "chromium"
+      }
+    ]
   }
 }
 
@@ -167,14 +228,75 @@ Use either:
   }
 })
 
+test('v8 coverage provider throws when using chromium and other non-chromium browser', async () => {
+  const { stderr } = await runVitest({
+    coverage: {
+      enabled: true,
+    },
+    browser: {
+      enabled: true,
+      headless: true,
+      provider: 'playwright',
+      instances: [
+        { browser: 'chromium' },
+        { browser: 'firefox' },
+        { browser: 'webkit' },
+      ],
+    },
+  })
+
+  expect(stderr).toMatch(
+    `Error: @vitest/coverage-v8 does not work with
+{
+  "browser": {
+    "provider": "playwright",
+    "instances": [
+      {
+        "browser": "chromium"
+      },
+      {
+        "browser": "firefox"
+      },
+      {
+        "browser": "webkit"
+      }
+    ]
+  }
+}
+
+Use either:
+{
+  "browser": {
+    "provider": "playwright",
+    "instances": [
+      {
+        "browser": "chromium"
+      }
+    ]
+  }
+}
+
+...or change your coverage provider to:
+{
+  "coverage": {
+    "provider": "istanbul"
+  }
+}`,
+  )
+})
+
 test('v8 coverage provider cannot be used in workspace without playwright + chromium', async () => {
   const { stderr } = await runVitest({ coverage: { enabled: true }, workspace: './fixtures/workspace/browser/workspace-with-browser.ts' })
   expect(stderr).toMatch(
     `Error: @vitest/coverage-v8 does not work with
 {
   "browser": {
     "provider": "webdriverio",
-    "name": "chrome"
+    "instances": [
+      {
+        "browser": "chrome"
+      }
+    ]
   }
 }`,
   )