Introduzione

Panoramica

Vitest è un framework di testing di nuova generazione alimentato da Vite.

Puoi scoprire di più sulle motivazioni alla base del progetto nella sezione Perché Vitest.

Prova Vitest Online

Puoi provare Vitest online su StackBlitz. Vitest viene eseguito direttamente nel browser ed è quasi identico a una configurazione locale, ma non richiede l'installazione di nulla sulla tua macchina.

Aggiungi Vitest al tuo progetto

Impara come installare con questo video

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

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

Si consiglia di installare una copia di vitest nel file package.json utilizzando uno dei metodi elencati sopra. Tuttavia, se preferisci eseguire vitest direttamente, puoi usare npx vitest (il comando npx è incluso in npm e Node.js).

Il comando npx eseguirà il comando dalla cartella node_modules/.bin locale, installando tutti i pacchetti necessari. Per impostazione predefinita, npx verifica se il comando esiste in $PATH o nei binari del progetto locale e lo esegue. Se il comando non viene trovato, viene installato automaticamente prima dell'esecuzione.

Scrittura dei test

Come esempio, scriveremo un semplice test che verifica l'output 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';

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

TIP

Per impostazione predefinita, i test devono contenere ".test." o ".spec." nel nome del file.

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 package manager, 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

Per saperne di più sull'utilizzo di Vitest, consulta la sezione API.

Configurazione di Vitest

Uno dei principali vantaggi di Vitest è la sua configurazione unificata con Vite. Se presente, vitest leggerà il file vite.config.ts principale per allinearsi ai plugin e alla configurazione della tua app Vite. Ad esempio, la configurazione resolve.alias e plugins di Vite funzionerà senza problemi. Se desideri una configurazione diversa durante il test, puoi:

• Creare un file vitest.config.ts, che avrà la priorità più alta.
• Passare l'opzione --config alla CLI, ad es. vitest --config ./path/to/vitest.config.ts.
• Utilizzare process.env.VITEST o la proprietà mode su defineConfig (verrà impostata su test se non sovrascritta) per applicare condizionatamente 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 stai utilizzando Vite come strumento di build, puoi configurare Vitest utilizzando la proprietà test nel tuo file di configurazione:

import { defineConfig } from 'vitest/config';

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

TIP

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

Se stai già utilizzando Vite, aggiungi la proprietà test nella tua configurazione Vite. Dovrai anche aggiungere un riferimento ai tipi Vitest utilizzando una direttiva triple slash nella parte superiore del tuo file di configurazione.

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

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

Consulta l'elenco delle opzioni di configurazione nel Riferimento Configurazione

WARNING

Se decidi di avere due file di configurazione separati per Vite e Vitest, assicurati di definire le stesse opzioni Vite nel tuo file di configurazione Vitest, poiché sovrascriverà il tuo file Vite, non lo estenderà. Puoi anche utilizzare 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, consigliamo di utilizzare lo stesso file sia per Vite che per Vitest invece di creare due file separati.

Supporto per gli spazi di lavoro

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à è particolarmente utile per le configurazioni monorepo.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // you can use a list of glob patterns to define your workspaces
  // Vitest expects a list of config files
  // or directories where there is a config file
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // you can even run the same tests,
  // but with different configs in the same "vitest" process
  {
    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 da riga di comando

In un progetto in cui Vitest è installato, puoi utilizzare il binario vitest negli script npm oppure eseguirlo direttamente con npx vitest. Ecco gli script npm predefiniti in un progetto Vitest preconfigurato:

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

Per eseguire i test una sola 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

Integrazione con gli IDE

Abbiamo anche fornito un'estensione ufficiale per Visual Studio Code per migliorare la tua esperienza di test con Vitest.

Installa da VS Code Marketplace

Scopri di più su Integrazioni IDE

Esempi

Esempio	Sorgente	Playground
basic	GitHub	Play Online
fastify	GitHub	Play Online
lit	GitHub	Play Online
marko	GitHub	Play Online
preact	GitHub	Play Online
react	GitHub	Play Online
solid	GitHub	Play Online
sveltekit	GitHub	Play Online
typecheck	GitHub	Play Online
workspace	GitHub	Play Online

Progetti che utilizzano 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

Utilizzo di Commit Non Pubblicati

Se non puoi aspettare una nuova release per testare le ultime funzionalità, dovrai clonare il repository vitest sulla tua macchina locale e quindi compilarlo e collegarlo tu stesso (pnpm è richiesto):

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 package manager preferito per questo passaggio

Quindi vai al progetto in cui stai utilizzando Vitest ed esegui pnpm link --global vitest (o il package manager che hai utilizzato per collegare vitest globalmente).

Comunità

Per domande o assistenza, contatta la community su Discord e GitHub Discussions.