Configurazioni Multiple

A partire da Vitest 3, è possibile specificare diverse configurazioni del browser utilizzando la nuova opzione browser.instances.

Il vantaggio principale dell'utilizzo di browser.instances rispetto ai progetti di test è un miglioramento del caching. Ogni progetto utilizzerà lo stesso server Vite, il che significa che la trasformazione dei file e il pre-bundling delle dipendenze avverranno una sola volta.

Browser Diversi

È possibile utilizzare il campo browser.instances per specificare le opzioni per diversi browser. Ad esempio, se si desidera eseguire gli stessi test in browser diversi, la configurazione minima avrà questo aspetto:

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

Diverse Configurazioni

È anche possibile specificare diverse opzioni di configurazione indipendentemente dal browser (sebbene le istanze possano anche includere campi 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);
});

In questo esempio, Vitest eseguirà tutti i test utilizzando il browser chromium, ma eseguirà il file './ratio-setup.ts' solo nella prima configurazione e inietterà un valore di ratio diverso a seconda del campo provide.

WARNING

È importante definire un valore name personalizzato se si utilizza lo stesso nome del browser, altrimenti Vitest assegnerà il nome del browser come nome del progetto.

Filtro

È possibile filtrare quali progetti eseguire con il flag --project. Vitest assegnerà automaticamente il nome del browser come nome del progetto se quest'ultimo non è assegnato manualmente. Se la configurazione root ha già un nome, Vitest li combinerà: 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

Vitest non può eseguire più istanze con la modalità headless impostata su false (questo è il comportamento predefinito). Durante lo sviluppo, è possibile selezionare quale progetto eseguire nel terminale:

? 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 si hanno diversi progetti non-headless in CI (cioè headless: false è impostato manualmente nella configurazione e non sovrascritto nell'ambiente CI), Vitest causerà il fallimento dell'esecuzione e non avvierà alcun test.

La capacità di eseguire test in modalità headless non ne è influenzata. È comunque possibile eseguire tutte le istanze in parallelo a condizione che non siano configurate con headless: false.