Progetti di Test

Progetto Esempio

GitHub - Prova Online

WARNING

Questa funzionalità è anche nota come workspace. Il workspace è stato deprecato dalla versione 3.2 e sostituito dalla configurazione projects. Funzionalmente, sono equivalenti.

Vitest offre la possibilità di definire più configurazioni di progetto all'interno di un singolo processo Vitest. Questa funzionalità è particolarmente utile per le configurazioni monorepo, ma può anche essere impiegata per eseguire test con diverse impostazioni, come resolve.alias, plugins, o test.browser, e altro ancora.

Definizione dei Progetti

È possibile definire i progetti nella configurazione radice config:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: ['packages/*'],
  },
});

Le configurazioni di progetto possono essere configurazioni inline, file o pattern glob che fanno riferimento ai vostri progetti. Ad esempio, se avete una cartella denominata packages che contiene i vostri progetti, potete definire un array nella vostra configurazione Vitest radice:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: ['packages/*'],
  },
});

Vitest tratterà ogni cartella in packages come un progetto separato, anche se non contiene un file di configurazione al suo interno. Se questo pattern glob corrisponde a qualsiasi file, sarà considerato una configurazione Vitest, anche se non contiene vitest nel suo nome o ha un'estensione di file non comune.

WARNING

Vitest non considera il file vitest.config radice come un progetto, a meno che non sia esplicitamente specificato nella configurazione. Di conseguenza, la configurazione radice influenzerà solo le opzioni globali, come reporters e coverage. È importante notare che Vitest eseguirà sempre determinati hook di plugin, come apply, config, configResolved o configureServer, specificati nel file di configurazione radice. Vitest utilizza anche gli stessi plugin per eseguire setup globali e fornitori di copertura personalizzati.

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

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: ['packages/*/vitest.config.{e2e,unit}.ts'],
  },
});

Questo pattern includerà solo i progetti che hanno un file vitest.config contenente e2e o unit prima dell'estensione.

È inoltre possibile definire i progetti utilizzando la configurazione inline. La configurazione supporta entrambe le sintassi simultaneamente.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      // include tutte le cartelle e i file all'interno della cartella `packages`
      'packages/*',
      {
        // aggiungi "extends: true" per ereditare le opzioni dalla configurazione radice
        extends: true,
        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}'],
          // il colore dell'etichetta del nome può essere personalizzato
          name: { label: 'node', color: 'green' },
          environment: 'node',
        },
      },
    ],
  },
});

WARNING

Tutti i progetti devono avere nomi univoci; in caso contrario, Vitest restituirà un errore. Se un nome non è fornito nella configurazione inline, Vitest assegnerà un numero. Per le configurazioni di progetto definite con la sintassi glob, Vitest utilizzerà per impostazione predefinita la proprietà "name" nel file package.json più vicino o, in assenza di esso, il nome della cartella.

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

// @errors: 2769
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, definisci uno script nel tuo package.json radice:

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

I test possono ora essere eseguiti utilizzando il tuo gestore di pacchetti:

npm

npm run test

yarn

yarn test

pnpm

pnpm run test

bun

bun run test

Se hai bisogno di eseguire i test solo all'interno di un singolo progetto, utilizza l'opzione CLI --project:

npm

npm run test --project e2e

yarn

yarn test --project e2e

pnpm

pnpm run test --project e2e

bun

bun run test --project e2e

TIP

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

npm

npm run test --project e2e --project unit

yarn

yarn test --project e2e --project unit

pnpm

pnpm run test --project e2e --project unit

bun

bun run test --project e2e --project unit

Configurazione

Nessuna delle opzioni di configurazione è ereditata dal file di configurazione a livello radice. Puoi creare un file di configurazione condiviso e unirlo manualmente con la configurazione del progetto:

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

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

Inoltre, puoi utilizzare l'opzione extends per ereditare dalla tua configurazione a livello radice. Tutte le opzioni verranno fuse.

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    pool: 'threads',
    projects: [
      {
        // erediterà le opzioni da questa configurazione come plugin e pool
        extends: true,
        test: {
          name: 'unit',
          include: ['**/*.unit.test.ts'],
        },
      },
      {
        // non erediterà alcuna opzione da questa configurazione
        // questo è il comportamento predefinito
        extends: false,
        test: {
          name: 'integration',
          include: ['**/*.integration.test.ts'],
        },
      },
    ],
  },
});

Opzioni Non Supportate

Alcune delle opzioni di configurazione non sono consentite in una configurazione di progetto. Nello specifico:

• coverage: la copertura è gestita per l'intero processo
• reporters: sono supportati solo i reporter a livello radice
• resolveSnapshotPath: solo il risolutore a livello radice viene considerato
• tutte le altre opzioni che non influenzano i test runner

Tutte le opzioni di configurazione che non sono supportate all'interno di una configurazione di progetto sono contrassegnate con il simbolo * nella guida "Config". È necessario definirle una volta nel file di configurazione radice.