FabioBiondi.
← tutti i corsi
// corso · 2026angularIN ARRIVO

Unit Test in Angular con Vitest

Scrivere unit e integration test per componenti, servizi, pipe e direttive Angular utilizzando Vitest, il nuovo runner ufficiale di Angular CLI.

Durata
4h
Livello
Avanzato
In arrivo

Questo corso sarà presto disponibile.

Stiamo finalizzando contenuti e materiali. Puoi comunque aggiungerlo al carrello per pianificarlo con il tuo team: ne discutiamo insieme nella call di consulenza gratuita e ti aggiorno appena è pronto.

[ descrizione ]

Di cosa parla
questo corso.

Contesto, obiettivi e taglio del corso. Tutto è personalizzabile in base a stack e team — questa è la base di partenza.

§01

INTRODUZIONE

Angular ha adottato Vitest come runner di test ufficiale al posto di Karma e Jasmine. Tutti i nuovi progetti generati con Angular CLI utilizzano oggi Vitest, eseguito in ambiente Node.js con jsdom per la simulazione del DOM.

Vitest è veloce, moderno, supporta nativamente ESM e TypeScript, integra code coverage e si presta sia all'esecuzione locale in watch mode sia all'integrazione in pipeline di CI.

In questo corso imparerai a sfruttarlo al meglio per scrivere test affidabili e manutenibili, focalizzandoti sul comportamento osservabile dei componenti e sulla logica delle tue feature, senza accoppiarti ai dettagli implementativi.

§02

PERCHÉ TESTARE

I test non sono un costo: sono un investimento.

Ogni volta che modifichi un componente, aggiungi una feature o esegui un refactoring, una buona suite di unit test ti dice in pochi secondi se hai rotto qualcosa.

Questo significa:
  • • rilasciare più frequentemente e con più sicurezza
  • • ridurre drasticamente i bug che arrivano in produzione
  • • poter rifattorizzare senza paura di compromettere funzionalità esistenti
  • • avere una documentazione vivente del comportamento atteso del codice

Angular + Vitest rendono oggi questo processo più veloce e piacevole che mai.
§03

COSA IMPARERAI

Il corso copre tutti gli scenari di testing più comuni in un'applicazione Angular moderna:
Setup e configurazione di Vitest in un progetto Angular (nuovo o migrato da Karma)
• Scrivere codice testabile: linee guida su dependency injection, separazione delle responsabilità, signal-based components
• Testare componenti standalone, interazioni DOM, event binding e signal-based inputs/outputs
• Testare servizi, pipe e direttive
• Mockare chiamate HTTP con provideHttpClientTesting
• Testare routing e navigazione
• Utilizzo dei Component Harness per test robusti e disaccoppiati dal markup
• Generare report di code coverage e integrazione in CI
§04

OBIETTIVO DEL CORSO

Al termine del corso sarai in grado di scrivere una suite di test completa per un'applicazione Angular reale, integrarla nelle pipeline di CI/CD e mantenerla nel tempo senza che diventi un peso.

Imparerai a riconoscere quali test scrivere e — altrettanto importante — quali NON scrivere, evitando test fragili, ridondanti o accoppiati all'implementazione.

Le tecniche apprese sono in larga parte trasferibili anche ad altri framework (React, Vue, Svelte) che adottano Vitest come runner, perché si basano su principi universali di testing del comportamento.
§05

REQUISITI

È richiesta una buona conoscenza di Angular (componenti, servizi, dependency injection, signals) e di TypeScript.

Non è necessaria una conoscenza pregressa di Vitest, Jest o Jasmine: i concetti sono introdotti gradualmente partendo dalle basi.
[ programma ]

Cosa vediamo,
in dettaglio.

Il programma viene rifinito con il team prima del corso, in base a stack, obiettivi e livello. Quella che vedi è la base: possiamo accelerare o approfondire dove serve e, se necessario, modificare il programma.
La maggior parte del corso è live-coding, con esempi pratici.

6 moduli · 28 argomenti
  1. M01

    Vitest e Test Fundamentals

    • Perché Angular ha sostituito Karma con Vitest
    • Installazione e configurazione in un progetto Angular
    • Struttura di un test: describe, it, expect
    • Watch mode, coverage e modalità CI
    • Migrazione da Karma/Jasmine a Vitest
  2. M02

    Configurazione e Setup

    • Opzioni in angular.json: include, exclude, setupFiles
    • Provider globali con providersFile
    • Setup di mock comuni a tutti i test
  3. M03

    Testare Componenti

    • TestBed e creazione di un componente sotto test
    • Testare il rendering del template e le interazioni DOM
    • Testare componenti con signal inputs/outputs e model()
    • Testare componenti con @Input/@Output classici
    • Component Harness: API ufficiali per test robusti
    • Testare componenti che usano Angular Material o librerie UI
  4. M04

    Testare Servizi, Pipe e Direttive

    • Unit test di servizi con dipendenze mockate
    • HTTP testing con provideHttpClientTesting e HttpTestingController
    • Testare pipe pure e impure
    • Testare direttive di attributo
  5. M05

    Tecniche Avanzate

    • Mock di moduli e librerie di terze parti
    • Spy, stub e fake con le API di Vitest
    • Test asincroni: fakeAsync, tick, gestione di Promise e Observable
    • Testare routing e ActivatedRoute
    • Testare componenti che usano RxJS e Signals insieme
  6. M06

    Coverage, CI e Best Practice

    • Generare e leggere i report di code coverage
    • Integrazione in pipeline di CI (GitHub Actions, GitLab CI)
    • Esecuzione su browser reali con Playwright o WebdriverIO
    • Anti-pattern: cosa NON testare e come evitare test fragili
    • Strategie per mantenere la suite veloce e affidabile nel tempo

Pronto a portarlo nel tuo team?

Contattami →