Testare JavaScript: Guida Completa a Unit Test, Integrazione e TDD

Scrivere codice senza prevedere dei test significa, di fatto, rilasciare un software incompleto. La fase di testing non è un rallentamento, ma un investimento che garantisce la stabilità del prodotto nel tempo. In questa guida esploreremo come implementare una strategia di testing solida per le tue applicazioni JavaScript, riducendo i bug in produzione e migliorando la manutenibilità del progetto.

La Gerarchia dei Test: La Piramide del Testing

Per ottimizzare tempi e risorse, è fondamentale bilanciare i diversi tipi di test seguendo il modello della piramide:

• Unit Test (Test Unitari): Verificano il funzionamento di singole funzioni o componenti in isolamento. Sono estremamente veloci e rappresentano la base della nostra piramide.
• Integration Test (Test di Integrazione): Controllano come diversi moduli interagiscono tra loro, come la comunicazione tra un servizio API e il database.
• End-to-End (E2E) Test: Simulano il comportamento reale dell'utente nel browser, verificando flussi completi come la registrazione o il checkout.

         /     Test E2E      \        ← Pochi (lenti, complessi)
        / Test di Integrazione \      ← Moderati
       /      Unit Test         \     ← Molti (rapidi, economici)

Configurazione Professionale con Jest

Jest è attualmente il framework di testing più popolare nell'ecosistema JavaScript grazie alla sua semplicità e alle funzionalità "out-of-the-box" come il mocking e la copertura del codice.

# Installazione di Jest nel progetto
npm install -D jest

# Configurazione per progetti TypeScript
npm install -D jest ts-jest @types/jest

# Configura gli script nel file package.json
"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage"
}

Scrivere il Primo Test Case

Immaginiamo di avere una semplice libreria per operazioni matematiche. Ecco come strutturare il codice e il relativo test per garantire che ogni scenario venga gestito correttamente.

export function add(a, b) {
  return a + b;
}

export function divide(a, b) {
  if (b === 0) throw new Error('Divisione per zero non permessa');
  return a / b;
}

import { add, divide } from './math';

describe('Operazione add', () => {
  test('somma correttamente due numeri positivi', () => {
    expect(add(2, 3)).toBe(5);
  });

  test('gestisce i numeri negativi', () => {
    expect(add(-1, -1)).toBe(-2);
  });
});

describe('Operazione divide', () => {
  test('esegue la divisione tra due numeri', () => {
    expect(divide(10, 2)).toBe(5);
  });

  test('solleva un errore in caso di divisione per zero', () => {
    expect(() => divide(10, 0)).toThrow('Divisione per zero non permessa');
  });
});

Matcher Comuni in Jest

I matchers permettono di verificare i valori in modi differenti. Scegliere quello corretto rende i test più leggibili e precisi.

// Uguaglianza
expect(valore).toBe(100);              // Uguaglianza stretta (===)
expect(oggetto).toEqual({ id: 1 });    // Confronto profondo (deep equality)

// Veridicità
expect(valore).toBeTruthy();
expect(valore).toBeFalsy();
expect(valore).toBeNull();
expect(valore).toBeUndefined();

// Numeri e Stringhe
expect(valore).toBeGreaterThan(10);
expect(0.1 + 0.2).toBeCloseTo(0.3);    // Essenziale per i decimali
expect(testo).toMatch(/pan-tool/);     // Supporto Regex

// Array e Oggetti
expect(lista).toContain('JavaScript');
expect(oggetto).toHaveProperty('role', 'admin');

Mocking: Isolare le Dipendenze

Il mocking è fondamentale per testare componenti che dipendono da servizi esterni (come database o API esterne) senza doverli invocare realmente.

// Creazione di una funzione mock
const spia = jest.fn();
spia.mockReturnValue('Dati finti');

// Verifica delle chiamate
expect(spia).toHaveBeenCalledTimes(1);

// Mocking di un intero modulo
jest.mock('./api-client', () => ({
  fetchData: jest.fn().mockResolvedValue({ success: true }),
}));

Gestione dei Test Asincroni

Molte operazioni in JavaScript sono asincrone. Jest facilita il testing di Promise e chiamate async/await in modo naturale.

// Utilizzo di async/await nei test
test('recupera i dati dal profilo utente', async () => {
  const user = await getUserProfile(1);
  expect(user.username).toBe('admin_user');
});

// Test di errori asincroni
test('gestisce il fallimento della richiesta', async () => {
  await expect(getUserProfile(-1)).rejects.toThrow();
});

Il Flusso TDD (Test-Driven Development)

Il TDD è una metodologia di sviluppo in cui i test vengono scritti prima del codice funzionale. Segue un ciclo iterativo:

• Red: Scrivi un test che fallisce perché la funzionalità non esiste ancora.
• Green: Scrivi il codice minimo indispensabile per far passare il test.
• Refactor: Ottimizza il codice mantenendo i test superati.

Questo approccio sposta il focus sul design dell'interfaccia e garantisce una copertura dei test vicina al 100% fin dal primo giorno.

Migliori Pratiche per un Testing di Successo

• Testa il comportamento, non l'implementazione: I tuoi test non dovrebbero rompersi se cambi il nome di una variabile interna, ma solo se cambia il risultato finale.
• Un'asserzione per concetto: Ogni test dovrebbe avere un obiettivo chiaro e fallire per un unico motivo logico.
• Nomi descrittivi: Usa frasi che spieghino cosa ci si aspetta, ad esempio "dovrebbe bloccare l'accesso se il token è scaduto".
• Copertura del codice (Code Coverage): Punta all'80% di copertura, ma ricorda che la qualità dei test è più importante della quantità.
• Integrazione Continua (CI): Esegui i test automaticamente ad ogni commit o pull request per intercettare i bug immediatamente.