Configurations Multiples

Depuis Vitest 3, vous pouvez spécifier plusieurs configurations de navigateur différentes en utilisant la nouvelle option browser.instances.

L'avantage principal de l'utilisation de browser.instances plutôt que des projets de test réside dans l'amélioration de la mise en cache. Chaque instance utilisera le même serveur Vite, ce qui signifie que la transformation des fichiers et le pré-assemblage des dépendances n'auront lieu qu'une seule fois.

Plusieurs Navigateurs

Vous pouvez utiliser le champ browser.instances afin de spécifier des options pour différents navigateurs. Par exemple, si vous souhaitez exécuter les mêmes tests dans plusieurs navigateurs, la configuration minimale se présentera comme suit :

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

Configurations Différentes

Vous pouvez également spécifier différentes options de configuration indépendamment du type de navigateur (bien que les instances puissent également avoir des champs 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);
});

Dans cet exemple, Vitest exécutera tous les tests avec le navigateur chromium, mais exécutera le fichier './ratio-setup.ts' uniquement dans la première configuration et injectera une valeur ratio différente en fonction du champ provide.

WARNING

Notez que vous devez définir une valeur personnalisée pour name si vous utilisez le même nom de navigateur, car Vitest attribuera le browser comme nom de projet par défaut.

Filtrage

Vous pouvez filtrer les projets à exécuter avec l'option --project. Vitest attribuera automatiquement le nom du navigateur comme nom de projet s'il n'a pas été attribué manuellement. Si la configuration racine a déjà un nom, Vitest les fusionnera : custom -> custom (browser).

$ vitest --project=chromium

default

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

custom

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

WARNING

Vitest ne peut pas exécuter plusieurs instances dont le mode headless est réglé sur false (le comportement par défaut). Pendant le développement, vous pouvez sélectionner le projet à exécuter dans votre 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

Si vous avez plusieurs projets non-headless en CI (c'est-à-dire que headless: false est défini manuellement dans la configuration et non écrasé dans l'environnement CI), Vitest fera échouer l'exécution et ne démarrera aucun test.

Les tests en mode headless ne sont pas concernés par cette limitation. Vous pouvez toujours exécuter toutes les instances en parallèle tant qu'elles n'ont pas headless: false.