Confronto con Altri Test Runner

Jest

Jest ha dominato il panorama dei framework di testing, offrendo supporto immediato per la maggior parte dei progetti JavaScript, un'API intuitiva (it e expect) e una suite completa di funzionalità di testing essenziali (snapshot, mock, coverage). Siamo grati al team e alla community di Jest per aver creato un'API di testing così efficace e per aver promosso molti dei pattern di testing che sono ora uno standard nell'ecosistema web.

È possibile utilizzare Jest nelle configurazioni Vite. @sodatea ha sviluppato vite-jest, che mira a fornire un'integrazione di prima classe tra Vite e Jest. Gli ultimi ostacoli in Jest sono stati risolti, rendendola un'opzione valida per i tuoi test unitari.

Tuttavia, in un contesto in cui Vite offre supporto per gli strumenti web più comuni (TypeScript, JSX, i framework UI più popolari), Jest introduce una complessità ridondante. Se la tua applicazione è basata su Vite, avere due pipeline distinte da configurare e mantenere non è giustificato. Con Vitest, puoi definire la configurazione per i tuoi ambienti di sviluppo, build e test come un'unica pipeline, condividendo gli stessi plugin e lo stesso vite.config.js.

Anche se la tua libreria non utilizza Vite (ad esempio, se è costruita con esbuild o Rollup), Vitest rappresenta un'opzione interessante in quanto offre un'esecuzione più rapida per i tuoi test unitari e un significativo miglioramento della DX (Developer Experience) grazie alla modalità di watch predefinita che sfrutta l'Hot Module Reload (HMR) istantaneo di Vite. Vitest offre compatibilità con la maggior parte dell'API di Jest e delle librerie dell'ecosistema, rendendolo un sostituto diretto per Jest nella maggior parte dei progetti.

Cypress

Cypress è un test runner basato su browser e uno strumento complementare a Vitest. Se intendi utilizzare Cypress, ti suggeriamo di impiegare Vitest per tutta la logica headless della tua applicazione e Cypress per la logica basata su browser.

Cypress è noto come strumento di test end-to-end, ma il suo nuovo test runner per componenti offre un eccellente supporto per il testing dei componenti Vite ed è una scelta ideale per testare qualsiasi elemento renderizzato in un browser.

I runner basati su browser, come Cypress, WebdriverIO e Web Test Runner, sono in grado di rilevare problemi che Vitest non può individuare, poiché utilizzano il browser reale e le sue API.

Il driver di test di Cypress si concentra sulla verifica della visibilità, accessibilità e interattività degli elementi. Cypress è progettato specificamente per lo sviluppo e il testing dell'interfaccia utente, e la sua DX è incentrata sulla guida allo sviluppo dei tuoi componenti visivi tramite test. Puoi visualizzare il tuo componente renderizzato accanto al report dei test. Una volta completato il test, il componente rimane interattivo e puoi eseguire il debug di eventuali errori utilizzando gli strumenti di sviluppo del tuo browser.

Al contrario, Vitest si concentra sull'offrire la migliore DX possibile per test headless estremamente veloci. I runner basati su Node come Vitest supportano vari ambienti browser parzialmente implementati, come jsdom, che implementano le funzionalità sufficienti per consentirti di testare rapidamente qualsiasi codice che fa riferimento alle API del browser. Lo svantaggio è che questi ambienti browser presentano limitazioni in ciò che possono implementare. Ad esempio, a jsdom mancano diverse funzionalità come window.navigation o un motore di layout (offsetTop, ecc.).

Infine, a differenza del Web Test Runner, il test runner di Cypress è più simile a un IDE che a un test runner, poiché mostra il componente reale renderizzato nel browser, insieme ai risultati dei test e ai log.

Cypress ha anche integrato Vite nei suoi prodotti: ricostruendo l'UI della loro applicazione usando Vitesse e utilizzando Vite per guidare lo sviluppo del loro progetto tramite test.

Riteniamo che Cypress non sia la scelta ottimale per il testing unitario di codice headless, ma che l'utilizzo combinato di Cypress (per E2E e testing dei componenti) e Vitest (per i test unitari) coprirebbe tutti i requisiti di testing della tua applicazione.

WebdriverIO

WebdriverIO è, analogamente a Cypress, un test runner alternativo basato su browser e uno strumento complementare a Vitest. Può essere utilizzato sia come strumento di test end-to-end che per il testing di componenti web. Al suo interno, utilizza persino componenti di Vitest, ad esempio per mocking e stubbing all'interno dei test dei componenti.

WebdriverIO offre gli stessi vantaggi di Cypress, permettendoti di testare la tua logica in un browser reale. Tuttavia, utilizza veri standard web per l'automazione, superando alcuni dei compromessi e delle limitazioni riscontrabili nell'esecuzione dei test in Cypress. Inoltre, consente di eseguire test anche su dispositivi mobili, permettendoti di testare la tua applicazione in un numero ancora maggiore di ambienti.

Web Test Runner

@web/test-runner esegue i test all'interno di un browser headless, fornendo lo stesso ambiente di esecuzione della tua applicazione web senza la necessità di simulare le API del browser o il DOM. Questo rende anche possibile il debug all'interno di un browser reale utilizzando gli strumenti di sviluppo, sebbene non venga mostrata alcuna interfaccia utente per l'avanzamento passo-passo del test, come avviene nei test di Cypress.

Per utilizzare @web/test-runner con un progetto Vite, impiega @remcovaes/web-test-runner-vite-plugin. @web/test-runner non include librerie di asserzione o mocking, quindi spetta a te aggiungerle.

uvu

uvu è un test runner per Node.js e il browser. Esegue i test in un singolo thread, il che significa che i test non sono isolati e possono interferire tra i file. Vitest, al contrario, utilizza worker threads per isolare i test ed eseguirli in parallelo.

Per trasformare il tuo codice, uvu si basa sui meccanismi di require e loader. Vitest utilizza Vite, quindi i file vengono trasformati con tutta la potenza del sistema di plugin di Vite. In un contesto in cui Vite offre supporto per gli strumenti web più comuni (TypeScript, JSX, i framework UI più popolari), uvu introduce una duplicazione della complessità. Se la tua applicazione è basata su Vite, avere due pipeline distinte da configurare e mantenere non è giustificato. Con Vitest, puoi definire la configurazione per i tuoi ambienti di sviluppo, build e test come un'unica pipeline, condividendo gli stessi plugin e la stessa configurazione.

uvu non fornisce una modalità di watch intelligente per rieseguire i test modificati, mentre Vitest offre un'ottima DX grazie alla modalità di watch predefinita che sfrutta l'Hot Module Reload (HMR) istantaneo di Vite.

uvu è un'opzione veloce per eseguire test semplici, ma Vitest può essere più rapido e affidabile per test e progetti più complessi.