Per Iniziare

Panoramica

Vitest (pronunciato "vee-test") è un framework di testing di nuova generazione basato su Vite.

Puoi saperne di più sui motivi del progetto.

Provare Vitest Online

Puoi provare Vitest online su StackBlitz. Vitest viene eseguito direttamente nel browser ed è quasi identico alla configurazione locale, ma non richiede alcuna installazione sulla tua macchina.

Aggiungere Vitest al Tuo Progetto

Scopri come installarlo tramite video

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

Vitest richiede Vite >=v5.0.0 e Node >=v18.0.0

Si consiglia di installare vitest nel tuo package.json, utilizzando uno dei metodi elencati sopra. Tuttavia, se preferisci eseguire vitest direttamente, puoi usare npx vitest (lo strumento npx è incluso con npm e Node.js).

Lo strumento npx esegue il comando specificato. Per impostazione predefinita, npx verifica prima se il comando esiste nei binari del progetto locale. Se non lo trova, npx cercherà nel $PATH del sistema e lo eseguirà se trovato. Se il comando non viene trovato in nessuna delle due posizioni, npx lo installerà in una posizione temporanea prima dell'esecuzione.

Scrivere Test

Come esempio, scriveremo un semplice test che verifica il risultato di una funzione che somma due numeri.

// sum.js
export function sum(a, b) {
  return a + b;
}

// sum.test.js
import { expect, test } from 'vitest';
import { sum } from './sum.js';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

TIP

Per impostazione predefinita, i nomi dei file di test devono contenere ".test." o ".spec.".

Successivamente, per eseguire il test, aggiungi la seguente sezione al tuo package.json:

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

Infine, esegui npm run test, yarn test o pnpm test, a seconda del tuo gestore di pacchetti, e Vitest stamperà questo messaggio:

✓ sum.test.js (1)
  ✓ adds 1 + 2 to equal 3

Test Files  1 passed (1)
     Tests  1 passed (1)
  Start at  02:15:44
  Duration  311ms

WARNING

Se utilizzi Bun come gestore di pacchetti, assicurati di usare il comando bun run test invece di bun test, altrimenti Bun eseguirà il suo test runner.

Per maggiori informazioni sull'utilizzo di Vitest, consulta la sezione API.

Configurare Vitest

Uno dei vantaggi principali di Vitest è la sua configurazione unificata con Vite. Se presente, vitest leggerà il tuo vite.config.ts root per corrispondere ai plugin e alla configurazione della tua app Vite. Ad esempio, le configurazioni resolve.alias e plugins di Vite funzioneranno senza ulteriori configurazioni. Se desideri una configurazione diversa durante il testing, puoi:

• Creare vitest.config.ts, che avrà la priorità più alta.
• Passare l'opzione --config alla CLI, ad esempio vitest --config ./path/to/vitest.config.ts.
• Usare process.env.VITEST o la proprietà mode su defineConfig (sarà impostata su test se non specificata diversamente) per applicare condizionalmente una configurazione diversa in vite.config.ts.

Vitest supporta le stesse estensioni per il tuo file di configurazione di Vite: .js, .mjs, .cjs, .ts, .cts, .mts. Vitest non supporta l'estensione .json.

Se non utilizzi Vite come strumento di build, puoi configurare Vitest usando la proprietà test nel tuo file di configurazione:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // ...
  },
});

TIP

Anche se non usi Vite, Vitest si basa molto su di esso per la sua pipeline di trasformazione. Per questo motivo, puoi anche configurare qualsiasi proprietà descritta nella documentazione di Vite.

Se stai già usando Vite, aggiungi la proprietà test nella tua configurazione Vite. Dovrai inoltre aggiungere un riferimento ai tipi Vitest usando una direttiva triple slash all'inizio del tuo file di configurazione.

/// <reference types="vitest" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    // ...
  },
});

<reference types="vitest" /> smetterà di funzionare in Vitest 3, ma puoi iniziare a migrare a vitest/config in Vitest 2.1:

/// <reference types="vitest/config" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    // ... Specifica le opzioni qui.
  },
});

Consulta l'elenco delle opzioni di configurazione nel Riferimento Configurazione

WARNING

Se decidi di avere due file di configurazione distinti per Vite e Vitest, assicurati di definire le stesse opzioni Vite nel tuo file di configurazione Vitest poiché sovrascriverà il tuo file Vite, anziché estenderlo. Puoi anche usare il metodo mergeConfig dalle voci vite o vitest/config per unire la configurazione Vite con la configurazione Vitest:

vitest.config.mjs

import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config.mjs';

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      // ...
    },
  })
);

vite.config.mjs

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [Vue()],
});

Tuttavia, si consiglia di utilizzare lo stesso file sia per Vite che per Vitest, invece di creare due file separati.

Supporto per i Workspace

Esegui diverse configurazioni all'interno dello stesso progetto con Vitest Workspaces. Puoi definire un elenco di file e cartelle che definiscono il tuo workspace nel file vitest.workspace. Il file supporta le estensioni js/ts/json. Questa funzionalità funziona molto bene con le configurazioni monorepo.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // puoi usare un elenco di pattern glob per definire i tuoi workspace
  // Vitest si aspetta un elenco di file di configurazione
  // o directory contenenti un file di configurazione
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // puoi persino eseguire gli stessi test,
  // ma con configurazioni diverse all'interno dello stesso processo Vitest
  {
    test: {
      name: 'happy-dom',
      root: './shared_tests',
      environment: 'happy-dom',
      setupFiles: ['./setup.happy-dom.ts'],
    },
  },
  {
    test: {
      name: 'node',
      root: './shared_tests',
      environment: 'node',
      setupFiles: ['./setup.node.ts'],
    },
  },
]);

Interfaccia a Riga di Comando

In un progetto in cui Vitest è installato, puoi usare il binario vitest nei tuoi script npm, o eseguirlo direttamente con npx vitest. Ecco gli script npm predefiniti in un progetto Vitest generato:

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

Per eseguire i test una volta senza monitorare le modifiche ai file, usa vitest run. Puoi specificare opzioni CLI aggiuntive come --port o --https. Per un elenco completo delle opzioni CLI, esegui npx vitest --help nel tuo progetto.

Scopri di più sull'Interfaccia a Riga di Comando

Installazione Automatica delle Dipendenze

Vitest ti inviterà a installare determinate dipendenze se non sono già installate. Puoi disattivare questo comportamento impostando la variabile d'ambiente VITEST_SKIP_INSTALL_CHECKS=1.

Integrazioni IDE

È disponibile anche un'estensione ufficiale per Visual Studio Code per migliorare la tua esperienza di testing con Vitest.

Installa da VS Code Marketplace

Scopri di più sulle integrazioni IDE

Esempi

Esempio	Sorgente	Playground
basic	GitHub	Gioca Online
fastify	GitHub	Gioca Online
in-source-test	GitHub	Gioca Online
lit	GitHub	Gioca Online
vue	GitHub	Gioca Online
marko	GitHub	Gioca Online
preact	GitHub	Gioca Online
react	GitHub	Gioca Online
solid	GitHub	Gioca Online
svelte	GitHub	Gioca Online
sveltekit	GitHub	Gioca Online
profiling	GitHub	Non Disponibile
typecheck	GitHub	Gioca Online
workspace	GitHub	Gioca Online

Progetti che usano Vitest

• unocss
• unplugin-auto-import
• unplugin-vue-components
• vue
• vite
• vitesse
• vitesse-lite
• fluent-vue
• vueuse
• milkdown
• gridjs-svelte
• spring-easing
• bytemd
• faker
• million
• Vitamin
• neodrag
• svelte-multiselect
• iconify
• tdesign-vue-next
• cz-git

Usare Commit Non Rilasciati

Ogni commit sul ramo principale e ogni PR con l'etichetta cr-tracked sono pubblicati su pkg.pr.new. Puoi installarlo con npm i https://pkg.pr.new/vitest@{commit}.

Se vuoi testare le tue modifiche localmente, puoi compilare e collegare il progetto autonomamente (è richiesto pnpm):

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # puoi usare il tuo gestore di pacchetti preferito per questo passaggio

Quindi vai al progetto in cui stai usando Vitest ed esegui pnpm link --global vitest (o il gestore di pacchetti che hai usato per collegare vitest globalmente).

Comunità

Se hai domande o hai bisogno di aiuto, rivolgiti alla community su Discord e GitHub Discussions.