複数のセットアップ

Vitest 3 以降、新しい browser.instances オプションを使用して、複数の異なるブラウザ環境を構成できます。

browser.instances を テストプロジェクト よりも使用する主な利点は、キャッシュの改善です。すべてのインスタンスが同じ Vite サーバーを使用するため、ファイルの変換と 依存関係の事前バンドル は一度だけ実行されます。

複数のブラウザ

browser.instances フィールドを使用して、異なるブラウザのオプションを指定できます。例えば、同じテストを異なるブラウザで実行したい場合、最小限の設定は以下のようになります。

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

異なるセットアップ

ブラウザとは独立して異なる設定オプションを指定することも可能です（ただし、インスタンスも 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);
});

この例では、Vitest はすべてのテストを chromium ブラウザで実行しますが、'./ratio-setup.ts' ファイルは最初の設定でのみ実行され、provide フィールド に応じて異なる ratio 値が注入されます。

WARNING

同じブラウザ名を使用している場合、Vitest はプロジェクト名として browser を割り当てるため、カスタムの name 値を定義する必要がある点にご注意ください。

フィルタリング

--project フラグ を使用して、実行するプロジェクトをフィルタリングできます。Vitest は、手動で割り当てられていない場合、ブラウザ名をプロジェクト名として自動的に割り当てます。ルート設定にすでに名前がある場合、Vitest はそれらをマージします: custom -> custom (browser)。

$ vitest --project=chromium

default

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

custom

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

WARNING

Vitest は、headless モードが false に設定されている（これがデフォルトの動作です）複数のインスタンスを同時に実行できません。開発中は、ターミナルで実行するプロジェクトを選択できます。

? 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

CI で複数の非ヘッドレスプロジェクトがある場合（つまり、headless: false が設定で手動で設定されており、CI 環境で上書きされていない場合）、Vitest は実行を失敗させ、テストを開始しません。

ヘッドレスモードでテストを実行する機能は、これによって影響を受けません。headless: false に設定されていない限り、すべてのインスタンスを並行して実行できます。