Vitest: Guida Completa al Testing Ultra-Veloce per JS e TS

Nel mondo dello sviluppo moderno, scrivere codice che funzioni non è più sufficiente: dobbiamo essere certi che continui a funzionare anche dopo mesi di modifiche. È qui che entrano in gioco gli Unit Test, e oggi lo strumento di riferimento per chi usa JavaScript e TypeScript è senza dubbio Vitest.

Indice

Cos’è Vitest?

Vitest è un framework di testing unitario estremamente veloce, progettato per integrarsi nativamente con Vite. Se il tuo progetto (React, Vue, Svelte) usa Vite per la build, Vitest ne condivide la configurazione, eliminando uno dei mal di testa più comuni per gli sviluppatori: configurare il supporto a TypeScript e ai moduli moderni (ESM).

A differenza dei framework più datati, Vitest è costruito per la velocità. Sfrutta processi paralleli per eseguire i test in frazioni di secondo, offrendo un’esperienza di sviluppo fluida e quasi istantanea.

A cosa serve realmente?

Molti sviluppatori vedono il testing come un carico di lavoro extra. In realtà, Vitest serve a farti risparmiare tempo in tre modi:

Addio ai Bug “Zombie”: Ti assicura che un bug già risolto non si ripresenti mai più.
Refactoring senza paura: Puoi riscrivere intere parti del tuo codice. Se i test passano, sai di non aver rotto nulla.
Documentazione Eseguibile: Leggendo un test, un nuovo collega capisce immediatamente cosa dovrebbe fare una funzione senza dover interpretare righe di logica complessa.

Come iniziare a usare Vitest

Integrare Vitest in un progetto esistente è un’operazione che richiede meno di due minuti. Ecco i passaggi fondamentali:

1. Installazione

Apri il tuo terminale nella cartella del progetto e digita:

npm install -D vitest

2. Configurazione dello Script

Nel tuo file package.json, aggiungi una riga nella sezione “scripts” per lanciare i test con un semplice comando:

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

3. Scrivere il primo Unit Test

Immaginiamo di avere una funzione che calcola uno sconto. Creiamo un file chiamato sconto.test.js:

import { describe, it, expect } from 'vitest';
// La funzione da testare
const calcolaSconto = (prezzo, sconto) => prezzo - (prezzo * sconto / 100);
describe('Logica di Sconto', () => {
it('dovrebbe applicare correttamente il 20% di sconto', () => {
const risultato = calcolaSconto(100, 20);
expect(risultato).toBe(80);
});
it('dovrebbe restituire il prezzo originale se lo sconto è 0', () => {
expect(calcolaSconto(50, 0)).toBe(50);
});
});

Ora ti basta eseguire npm test nel terminale per vedere la magia: Vitest analizzerà il file e ti darà un feedback immediato (e colorato) sull’esito del test.

Le basi: Setup, Assertion e Mocking

Per padroneggiare Vitest, devi conoscere tre concetti universali che valgono in quasi tutti i linguaggi di programmazione:

Lifecycle Hooks (setup): Funzioni come beforeEach ti permettono di preparare l’ambiente (es. pulire un database fittizio) prima che ogni test venga eseguito.
Assertions (expect): È il cuore del test. Tu “ti aspetti” (expect) che un valore “sia” (toBe) quello corretto.
Mocking: Se la tua funzione scarica dati da internet, non vuoi che il test dipenda dalla tua connessione. Il mocking serve a “simulare” la risposta dell’API per testare solo la logica del tuo codice.

[Video] – Esempio di utilizzo di Vitest

In questo video vedrai un esempio di utilizzo di Vitest, a partire dall’installazione del framework fino al suo utilizzo.

Conclusione

Passare a Vitest significa scegliere la modernità e la velocità. Che tu sia un veterano di Jest o un principiante assoluto, la semplicità di configurazione e la velocità di esecuzione ti faranno innamorare del testing.

Vuoi vedere questi concetti in azione? Segui il video tutorial passo dopo passo per vedere come configurare un ambiente professionale da zero!