Múltiplas Configurações

A partir do Vitest 3, você pode especificar várias configurações de navegador distintas usando a nova opção browser.instances.

A principal vantagem de usar browser.instances em vez dos projetos de teste é o desempenho aprimorado do cache. Cada instância utilizará o mesmo servidor Vite, o que significa que a transformação de arquivos e o pré-agrupamento de dependências precisam ocorrer apenas uma vez.

Múltiplos Navegadores

Você pode usar o campo browser.instances para especificar opções para diferentes navegadores. Por exemplo, se você deseja executar os mesmos testes em navegadores distintos, a configuração mínima é a seguinte:

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

Configurações Diferentes

Você também pode especificar diferentes opções de configuração independentemente do navegador (embora as instâncias também possam ter 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);
});

Neste exemplo, o Vitest executará todos os testes no navegador chromium, mas apenas executará o arquivo './ratio-setup.ts' na primeira configuração e injetará um valor ratio diferente dependendo do campo provide.

WARNING

Observe que você precisa definir um valor name personalizado se estiver usando o mesmo nome de navegador, pois o Vitest atribuirá o browser como o nome do projeto, caso contrário.

Filtragem

Você pode filtrar quais projetos executar com a flag --project. O Vitest atribuirá automaticamente o nome do navegador como nome do projeto se não for atribuído manualmente. Se a configuração raiz já tiver um nome, o Vitest os mesclará: custom -> custom (browser).

$ vitest --project=chromium

default

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

custom

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

WARNING

O Vitest não pode executar várias instâncias que tenham o modo headless definido como false, que é o comportamento padrão. Durante o desenvolvimento, você pode selecionar qual projeto executar em seu 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

Se você tiver vários projetos com headless: false no CI (ou seja, headless: false é definido manualmente na configuração e não é sobrescrito no ambiente CI), o Vitest falhará e não executará nenhum teste.

A capacidade de executar testes no modo headless não é afetada por isso. Você ainda pode executar todas as instâncias em paralelo, desde que não tenham headless: false.