Workspace

Progetto di esempio

GitHub - Play Online

Vitest offre supporto integrato per i monorepo tramite un file di configurazione del workspace. Puoi creare un workspace per definire le configurazioni dei tuoi progetti.

Definizione di un workspace

Un workspace deve avere un file vitest.workspace o vitest.projects nella sua radice (nella stessa cartella del file di configurazione, se presente). Vitest supporta le estensioni ts/js/json per questo file.

Il file di configurazione del workspace deve avere un'esportazione predefinita con un elenco di file o pattern glob che fanno riferimento ai tuoi progetti. Ad esempio, se hai una cartella denominata packages che contiene i tuoi progetti, puoi definire un workspace con questo file di configurazione:

vitest.workspace.ts

export default ['packages/*'];

Vitest considererà ogni cartella in packages come un progetto separato, anche se non contiene un file di configurazione al suo interno.

WARNING

Vitest non considererà la configurazione di livello root come un progetto del workspace (quindi non eseguirà i test specificati in include) a meno che non sia specificata in questa configurazione.

Puoi anche fare riferimento ai progetti tramite i loro file di configurazione:

vitest.workspace.ts

export default ['packages/*/vitest.config.{e2e,unit}.ts'];

Questo pattern includerà solo i progetti con il file vitest.config che include e2e e unit prima dell'estensione.

WARNING

Se utilizzi pattern glob per fare riferimento a nomi di file, assicurati che il tuo file di configurazione inizi con vite.config o vitest.config. Altrimenti Vitest lo ignorerà.

Puoi anche definire progetti con configurazione inline. Il file del workspace supporta l'uso di entrambe le sintassi contemporaneamente.

vitest.workspace.ts

import { defineWorkspace } from 'vitest/config';

// defineWorkspace fornisce un'ottima esperienza di sviluppo (DX) per il type hinting
export default defineWorkspace([
  'packages/*',
  {
    // aggiungi "extends" per unire due configurazioni
    extends: './vite.config.js',
    test: {
      include: ['tests/**/*.{browser}.test.{ts,js}'],
      // si consiglia di definire un nome quando si utilizzano configurazioni inline
      name: 'happy-dom',
      environment: 'happy-dom',
    },
  },
  {
    test: {
      include: ['tests/**/*.{node}.test.{ts,js}'],
      name: 'node',
      environment: 'node',
    },
  },
]);

WARNING

Tutti i progetti devono avere nomi univoci. Altrimenti, Vitest genererà un errore. Se non fornisci un nome all'interno della configurazione inline, Vitest ne assegnerà uno automaticamente. Se non fornisci un nome all'interno di una configurazione di progetto definita con la sintassi glob, Vitest utilizzerà il nome della directory per impostazione predefinita.

Se non utilizzi configurazioni inline, puoi semplicemente creare un piccolo file JSON nella tua directory root:

vitest.workspace.json

["packages/*"]

I progetti del workspace non supportano tutte le proprietà di configurazione. Per una maggiore sicurezza dei tipi, usa il metodo defineProject invece del metodo defineConfig all'interno dei file di configurazione del progetto:

packages/a/vitest.config.ts

import { defineProject } from 'vitest/config';

export default defineProject({
  test: {
    environment: 'jsdom',
    // "reporters" non è supportato in una configurazione di progetto,
    // quindi mostrerà un errore
    reporters: ['json'],
  },
});

Esecuzione dei test

Per eseguire i test all'interno del workspace, definisci uno script nel tuo package.json root:

{
  "scripts": {
    "test": "vitest"
  }
}

Ora i test possono essere eseguiti utilizzando il tuo gestore di pacchetti:

npm

npm run test

yarn

yarn test

pnpm

pnpm run test

bun

bun test

Se devi eseguire i test solo all'interno di un singolo progetto, usa l'opzione CLI --project:

npm run test --project e2e

TIP

L'opzione CLI --project può essere utilizzata più volte per filtrare diversi progetti:

npm run test --project e2e --project unit

Configurazione

Nessuna delle opzioni di configurazione viene ereditata dal file di configurazione di livello root. Puoi creare un file di configurazione condiviso e unirlo manualmente alla configurazione del progetto:

packages/a/vitest.config.ts

import { defineProject, mergeConfig } from 'vitest/config';
import configShared from '../vitest.shared.js';

export default mergeConfig(
  configShared,
  defineProject({
    test: {
      environment: 'jsdom',
    },
  })
);

Inoltre, alcune delle opzioni di configurazione non sono consentite in una configurazione di progetto. In particolare:

• coverage: la copertura viene eseguita per l'intera area di lavoro
• reporters: possono essere supportati solo i reporter di livello root
• resolveSnapshotPath: viene rispettato solo il resolver di livello root
• tutte le altre opzioni che non influiscono sugli esecutori di test

TIP

Tutte le opzioni di configurazione che non sono supportate all'interno di una configurazione di progetto hanno il contrassegno * accanto a loro nella pagina "Config".

Copertura

La copertura per i progetti del workspace funziona immediatamente. Ma se hai l'opzione all abilitata e usi estensioni non convenzionali in alcuni dei tuoi progetti, dovrai avere un plugin che gestisca questa estensione nel tuo file di configurazione root.

Ad esempio, se hai un pacchetto che utilizza file Vue e ha il suo file di configurazione, ma alcuni dei file non vengono importati nei tuoi test, la copertura fallirà nel tentativo di analizzare l'utilizzo di file non utilizzati, poiché utilizza la configurazione principale anziché quella del progetto.