0Pricing
Frontend Academy · Lezione

Configurazione di Jest e test di base

Installare Jest, scrivere test describe/it/expect, usare matcher come toBe e toEqual ed eseguire i test in modalità watch durante lo sviluppo.

Configurazione di Jest e test di base è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Perché testare il codice frontend?

I test rilevano le regressioni quando modifica il codice. Documentano il comportamento previsto. Le danno la sicurezza necessaria per effettuare il refactoring. Senza test, ogni modifica è una scommessa sul fatto che non si sia rotto qualcos'altro.

Installazione di Jest

Per un progetto Vite + React, utilizzi Vitest (un test runner compatibile con Jest e nativo per Vite). Per altre configurazioni, installi Jest con babel-jest o ts-jest per TypeScript.

# Vitest (preferred for Vite projects):
npm install -D vitest

# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jest

Denominazione dei file di test

Posizioni i file di test accanto al codice sorgente: Button.test.ts, utils.spec.ts. In alternativa, utilizzi una cartella __tests__/. Jest individua i file che corrispondono a *.test.* o *.spec.*.

describe, it, expect

Strutturi i test con blocchi describe (gruppi) e funzioni it/test (test individuali). Esegua le asserzioni con expect.

import { add, formatCurrency } from './utils';

describe('Math utils', () => {
  it('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('handles negative numbers', () => {
    expect(add(-1, 1)).toBe(0);
  });
});

describe('Currency formatting', () => {
  it('formats USD', () => {
    expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
  });
});

Matcher comuni

Jest offre numerosi matcher: toBe (uguaglianza rigorosa), toEqual (uguaglianza profonda), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow, toBeGreaterThan.

expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();

Test del codice asincrono

Restituisca la promise oppure utilizzi async/await nei test. Jest attende che la promise venga risolta prima di considerare concluso il test.

it('fetches user data', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Alice');
});

// Or with resolves/rejects matchers:
it('resolves with user', () => {
  return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});

beforeEach e afterEach

Esegua la configurazione e la pulizia prima e dopo ogni test per mantenere i test isolati.

describe('User service', () => {
  beforeEach(() => {
    db.seed();
  });
  afterEach(() => {
    db.clear();
  });
  it('creates a user', async () => {
    const user = await userService.create({ name: 'Alice' });
    expect(user.id).toBeDefined();
  });
});

Esecuzione dei test

npm test esegue tutti i test. npm test -- --watch (Jest) o vitest in modalità watch riesegue i test quando cambia un file. L'interfaccia di Vitest (vitest --ui) offre un test runner basato sul browser.

Copertura dei test

jest --coverage (o vitest run --coverage) genera un report di copertura che mostra quali righe sono sottoposte a test. Un obiettivo di copertura del 70% o superiore è comune nei team. Una copertura del 100% non significa che non ci siano bug.

Scrivere codice testabile

Le funzioni pure (senza effetti collaterali) sono facilmente testabili. Mantenga le funzioni piccole e focalizzate. Inietti le dipendenze invece di importarle direttamente: in questo modo è facile sostituirle con test double.

Isolamento dei test

Ogni test dovrebbe essere completamente indipendente. I test che dipendono dagli effetti collaterali di altri test sono fragili. Eviti lo stato mutabile condiviso tra i test. Reimposti tutti i mock in afterEach.

Verifica rapida

Quale matcher di Jest verifica l'uguaglianza profonda di due oggetti?

Riepilogo: nozioni fondamentali di Jest

describe raggruppa i test. it/test definisce i singoli test. expect e i matcher verificano i risultati. toBe si usa per i valori primitivi. toEqual si usa per oggetti e array. I test asincroni utilizzano async/await oppure restituiscono la promise. beforeEach/afterEach servono per l'isolamento. I report di copertura mostrano quali righe sono sottoposte a test. Le funzioni pure sono le più semplici da testare.

Domande Frequenti

La lezione «Configurazione di Jest e test di base» è gratuita?

Sì — il testo completo di «Configurazione di Jest e test di base» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Configurazione di Jest e test di base»?

Installare Jest, scrivere test describe/it/expect, usare matcher come toBe e toEqual ed eseguire i test in modalità watch durante lo sviluppo. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Configurazione di Jest e test di base»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione di Jest e test di base
  2. @testing-library/react: render e userEvent
  3. @testing-library/vue: montare i componenti
  4. Mock dei moduli e delle chiamate API
← Torna a Frontend Academy