browser.instances option for multiple setups
The browser.instances option allows you to specify several different browser setups in your Vitest configuration. This option is part of the test.browser configuration object.
browser/multiple-setups
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
browser.instances advantage over test projects
The main advantage of using browser.instances over test projects is improved caching. Every project will use the same Vite server, meaning file transform and dependency pre-bundling happens only once instead of being repeated for each project.
Multiple browser example configuration
This example shows how to configure Vitest to run the same tests in different browsers using browser.instances: instances array contains objects with browser field set to 'chromium', 'firefox', or 'webkit'.
browser.instances with different setups
Each instance in browser.instances can have its own configuration including browser, name, setupFiles, and provide fields. The instances field accepts an array of configuration objects that can specify different options independently.
instance name field requirement
You need to define a custom name value if you are using the same browser name in multiple instances because Vitest will assign the browser name as the project name otherwise, which would create a conflict.
inject function for instance-specific values
The inject function from Vitest allows tests to access values provided via the provide field in browser instances. Each instance can provide different values that tests can access using inject('key').
Filtering browser instances with --project flag
You can filter which browser instances to run using the --project CLI flag. Vitest automatically assigns the browser name as a project name if it is not assigned manually. If the root config already has a name, Vitest merges them in format 'custom (browser)'.
Example vitest.config.ts with multiple browsers
import { defineConfig } from 'vitest/config' import { playwright } from '@vitest/browser-playwright' export default defineConfig({ test: { browser: { enabled: true, provider: playwright(), headless: true, instances: [ { browser: 'chromium' }, { browser: 'firefox' }, { browser: 'webkit' }, ], }, }, }) This example configures Vitest to run tests in three different browsers simultaneously using browser.instances.
Example browser instances with setupFiles and provide
import { defineConfig } from 'vitest/config' import { playwright } from '@vitest/browser-playwright' export default defineConfig({ test: { browser: { enabled: true, provider: playwright(), headless: true, instances: [ { browser: 'chromium', name: 'chromium-1', setupFiles: ['./ratio-setup.ts'], provide: { ratio: 1, }, }, { browser: 'chromium', name: 'chromium-2', provide: { ratio: 2, }, }, ], }, }, }) This example shows how to specify setupFiles and provide different values for each browser instance.
Example test using inject with browser instances
import { expect, inject, test } from 'vitest' import { globalSetupModifier } from './example.js' test('ratio works', () => { expect(inject('ratio') * globalSetupModifier).toBe(14) }) This example shows how a test accesses values provided by browser instances using the inject function.
Project name assignment for browser instances
When browser instances do not have a manual name assigned, Vitest automatically uses the browser name as the project name. If a root config has a name, it is merged with the browser name in the format 'rootName (browser)', such as 'custom (chromium)'.