Mehrere Setups

Seit Vitest 3 können Sie mit der neuen Option browser.instances mehrere verschiedene Browser-Setups konfigurieren.

Der Hauptvorteil der Verwendung von browser.instances im Vergleich zu den Testprojekten liegt im verbesserten Caching. Jedes Setup nutzt denselben Vite-Server, was bedeutet, dass die Dateitransformation und das Dependency Pre-Bundling nur einmal durchgeführt werden müssen.

Mehrere Browser

Sie können das Feld browser.instances verwenden, um Optionen für verschiedene Browser anzugeben. Wenn Sie beispielsweise dieselben Tests in mehreren Browsern ausführen möchten, sieht die minimale Konfiguration wie folgt aus:

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

Verschiedene Setups

Sie können auch verschiedene Konfigurationsoptionen unabhängig vom Browser angeben (obwohl die Instanzen auch browser-Felder enthalten können):

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 diesem Beispiel führt Vitest alle Tests im Browser chromium aus. Die Datei './ratio-setup.ts' wird jedoch nur in der ersten Konfiguration ausgeführt, und ein anderer ratio-Wert wird abhängig vom provide-Feld injiziert.

WARNING

Beachten Sie, dass Sie einen benutzerdefinierten name-Wert definieren müssen, wenn Sie denselben Browsernamen für mehrere Instanzen verwenden. Andernfalls weist Vitest den Browsernamen als Projektnamen zu, was zu Konflikten führen kann.

Filtern

Sie können filtern, welche Projekte mit dem Flag --project ausgeführt werden sollen. Vitest weist den Browsernamen automatisch als Projektnamen zu, wenn er nicht manuell zugewiesen wird. Wenn die Root-Konfiguration bereits einen Namen hat, wird Vitest diese zusammenführen: 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 kann keine mehreren Instanzen ausführen, bei denen der headless-Modus auf false gesetzt ist (das Standardverhalten). Während der Entwicklung können Sie im Terminal auswählen, welches Projekt Sie ausführen möchten:

? 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

Wenn Sie mehrere nicht-headless Projekte in CI haben (d.h. headless: false ist manuell in der Konfiguration gesetzt und nicht in der CI-Umgebung überschrieben), wird Vitest den Testlauf abbrechen und keine Tests starten.

Die Möglichkeit, Tests im Headless-Modus auszuführen, ist davon nicht betroffen. Sie können weiterhin alle Instanzen parallel ausführen, solange ihr headless-Modus nicht auf false gesetzt ist.