Múltiples configuraciones

A partir de Vitest 3, puedes especificar varias configuraciones de navegador diferentes utilizando la nueva opción browser.instances.

La principal ventaja de usar browser.instances en lugar de los proyectos de prueba es la mejora del caché. Cada instancia utilizará el mismo servidor Vite, lo que significa que la transformación de archivos y el pre-empaquetado de dependencias solo se realizarán una vez.

Varios navegadores

Puedes usar el campo browser.instances para especificar opciones para diferentes navegadores. Por ejemplo, si quieres ejecutar las mismas pruebas en varios navegadores, la configuración mínima es la siguiente:

import { defineConfig } from 'vitest/config';
export default defineConfig({
  test: {
    browser: {
      enabled: true,
      provider: 'playwright',
      headless: true,
      instances: [
        { browser: 'chromium' },
        { browser: 'firefox' },
        { browser: 'webkit' },
      ],
    },
  },
});

Diferentes configuraciones

También puedes especificar diferentes opciones de configuración independientemente del navegador (aunque las instancias también pueden tener campos browser):

vitest.config.ts

import { defineConfig } from 'vitest/config';
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,
          },
        },
      ],
    },
  },
});

example.test.ts

import { expect, inject, test } from 'vitest';
import { globalSetupModifier } from './example.js';

test('ratio works', () => {
  expect(inject('ratio') * globalSetupModifier).toBe(14);
});

En este ejemplo, Vitest ejecutará todas las pruebas en el navegador chromium, pero ejecutará el archivo './ratio-setup.ts' solo en la primera configuración e inyectará un valor ratio diferente dependiendo del campo provide.

WARNING

Ten en cuenta que debes definir un valor name personalizado si usas el mismo nombre de navegador, ya que de lo contrario Vitest asignará el nombre del navegador como nombre del proyecto.

Filtrado

Puedes filtrar qué proyectos ejecutar con la opción --project. Vitest asignará automáticamente el nombre del navegador como nombre del proyecto si no se asigna manualmente. Si la configuración raíz ya tiene un nombre, Vitest los fusionará: custom -> custom (browser).

$ vitest --project=chromium

default

export default defineConfig({
  test: {
    browser: {
      instances: [
        // nombre: chromium
        { browser: 'chromium' },
        // nombre: custom
        { browser: 'firefox', name: 'custom' },
      ]
    }
  }
})

custom

export default defineConfig({
  test: {
    name: 'custom',
    browser: {
      instances: [
        // nombre: custom (chromium)
        { browser: 'chromium' },
        // nombre: manual
        { browser: 'firefox', name: 'manual' },
      ]
    }
  }
})

WARNING

Vitest no puede ejecutar múltiples instancias con el modo headless configurado en false (el comportamiento por defecto). Durante el desarrollo, puedes seleccionar qué proyecto ejecutar en tu terminal:

? Found multiple projects that run browser tests in headed mode: "chromium", "firefox".
Vitest cannot run multiple headed browsers at the same time. Select a single project
to run or cancel and run tests with "headless: true" option. Note that you can also
start tests with --browser=name or --project=name flag. › - Use arrow-keys. Return to submit.
❯   chromium
    firefox

Si tienes varios proyectos con headless: false en CI (es decir, headless: false se establece manualmente en la configuración y no se anula en el entorno de CI), Vitest detendrá el proceso y no ejecutará ninguna prueba.

La capacidad de ejecutar pruebas en modo headless no se ve afectada por esto. Aún puedes ejecutar todas las instancias en paralelo siempre y cuando no tengan headless: false.