Wiele konfiguracji

Od Vitest 3 możliwe jest zdefiniowanie wielu różnych ustawień przeglądarki za pomocą nowej opcji browser.instances.

Główną zaletą używania browser.instances zamiast projektów testowych jest lepsze buforowanie. Każdy projekt będzie korzystał z tego samego serwera Vite, co oznacza, że transformacja plików i pre-bundling zależności muszą nastąpić tylko raz.

Kilka przeglądarek

Możesz użyć pola browser.instances, aby określić opcje dla różnych przeglądarek. Na przykład, jeśli chcesz uruchomić te same testy w różnych przeglądarkach, minimalna konfiguracja wygląda tak:

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

Różne konfiguracje

Możesz również określić różne ustawienia konfiguracyjne niezależnie od przeglądarki (chociaż instancje mogą również zawierać pola 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);
});

W tym przykładzie Vitest uruchomi wszystkie testy w przeglądarce chromium, ale wykona plik './ratio-setup.ts' tylko w pierwszej konfiguracji i wstrzyknie inną wartość ratio w zależności od wartości pola provide.

WARNING

Należy pamiętać, że trzeba zdefiniować unikalną wartość name, jeśli używasz tej samej nazwy przeglądarki, ponieważ w przeciwnym razie Vitest przypisze nazwę przeglądarki jako nazwę projektu.

Filtrowanie

Możesz filtrować projekty, które mają być uruchamiane za pomocą flagi --project. Vitest automatycznie przypisze nazwę przeglądarki jako nazwę projektu, jeśli nie zostanie przypisana ręcznie. Jeśli konfiguracja główna ma już nazwę, Vitest je połączy: custom -> custom (browser).

$ vitest --project=chromium

default

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

custom

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

WARNING

Vitest nie może uruchamiać wielu instancji, które mają headless ustawione na false (domyślne zachowanie). Podczas programowania możesz wybrać, który projekt uruchomić w terminalu:

? 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

Jeśli masz kilka projektów w trybie graficznym w CI (tj. headless: false jest ustawione ręcznie w konfiguracji i nie jest nadpisywane w środowisku CI), Vitest przerwie działanie bez uruchamiania testów.

To nie ma wpływu na możliwość uruchamiania testów w trybie headless. Nadal możesz uruchamiać wszystkie instancje równolegle, o ile nie mają headless: false.