Confronti 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 un set completo di funzionalità di testing che la maggior parte delle configurazioni richiederebbe (snapshot, mock, copertura). Siamo grati al team e alla comunità di Jest per aver creato un'API di testing così piacevole e per aver promosso molti dei modelli di testing che sono ora uno standard nell'ecosistema web.

È possibile utilizzare Jest nelle configurazioni Vite. @sodatea ha creato vite-jest, che mira a fornire un'integrazione ottimale con Vite per Jest. Gli ultimi problemi noti in Jest sono stati risolti, quindi questa è un'opzione valida per i tuoi test unitari.

Tuttavia, in un contesto in cui Vite fornisce supporto per i tool web più comuni (TypeScript, JSX, i framework UI più popolari), Jest rappresenta una duplicazione della complessità. Se la tua app è basata su Vite, avere due diverse pipeline da configurare e mantenere non è facilmente giustificabile. 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 è un'opzione interessante in quanto offre un'esecuzione più rapida per i tuoi unit test e un miglioramento della DX (Developer Experience) grazie alla modalità di osservazione predefinita che utilizza l'Hot Module Reload (HMR) istantaneo di Vite. Vitest offre compatibilità con la maggior parte delle API di Jest e delle librerie dell'ecosistema, quindi nella maggior parte dei progetti, dovrebbe essere un sostituto diretto di Jest.

Cypress

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

Cypress è noto come uno strumento di testing end-to-end, ma il loro nuovo test runner per componenti ha un ottimo supporto per il testing dei componenti Vite ed è una scelta ideale per testare qualsiasi cosa venga renderizzata in un browser.

I runner basati su browser, come Cypress, WebdriverIO e Web Test Runner, rileveranno problemi che Vitest non può rilevare perché utilizzano il browser reale e le API del browser reale.

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 sul testare i tuoi componenti visivi in modo interattivo. Puoi vedere il tuo componente renderizzato insieme al test reporter. Una volta completato il test, il componente rimane interattivo e puoi eseguire il debug di eventuali errori utilizzando i devtools del tuo browser.

Al contrario, Vitest si concentra sulla fornitura della 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 quanto necessario per consentirti di eseguire rapidamente unit test su qualsiasi codice che faccia riferimento alle API del browser. Il compromesso è che questi ambienti browser hanno limitazioni in ciò che possono implementare. Ad esempio, jsdom presenta delle limitazioni 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 perché mostra anche il componente renderizzato reale nel browser, insieme ai risultati dei test e ai log.

Cypress ha anche integrato Vite nei loro prodotti: ricostruendo l'interfaccia utente della loro app utilizzando Vitesse e utilizzando Vite per lo sviluppo dei test del loro progetto.

Riteniamo che Cypress non sia una buona opzione per il testing unitario di codice headless, ma che l'utilizzo di Cypress (per E2E e Component Testing) e Vitest (per unit test) coprirebbe le esigenze di testing della tua app.

WebdriverIO

WebdriverIO è, come Cypress, un test runner alternativo basato su browser e uno strumento complementare a Vitest. Può essere utilizzato come strumento di testing end-to-end così come per il testing di web components. Utilizza persino componenti interni di Vitest, ad esempio per mock e stub all'interno dei test dei componenti.

WebdriverIO presenta gli stessi vantaggi di Cypress, consentendoti di testare la tua logica in un browser reale. Tuttavia, utilizza standard web reali per l'automazione, il che risolve alcuni dei problemi e delle limitazioni riscontrati durante i test in Cypress. Inoltre, ti consente di eseguire test anche su dispositivi mobili, offrendoti la possibilità 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 dover simulare le API del browser o il DOM. Ciò rende anche possibile il debug all'interno di un browser reale utilizzando i devtools, anche se non viene visualizzata alcuna interfaccia utente per l'esecuzione passo passo del test, come avviene nei test di Cypress. Esiste una modalità di osservazione, ma non è intelligente come quella di Vitest e potrebbe non rieseguire sempre i test desiderati. Per utilizzare @web/test-runner con un progetto Vite, utilizzare @remcovaes/web-test-runner-vite-plugin. @web/test-runner non include librerie di asserzione o di mock, quindi spetta a te aggiungerle.

uvu

uvu è un test runner per Node.js e il browser. Esegue i test in un singolo thread, quindi i test non sono isolati e possono influenzarsi a vicenda tra i file. Vitest, tuttavia, utilizza worker thread per isolare i test ed eseguirli in parallelo. Per trasformare il tuo codice, uvu si basa su require e loader hooks. Vitest utilizza Vite, quindi i file vengono trasformati con tutta la potenza del sistema di plugin di Vite. In un contesto in cui Vite fornisce supporto per i tool web più comuni (TypeScript, JSX, i framework UI più popolari), uvu rappresenta una duplicazione della complessità. Se la tua app è basata su Vite, avere due diverse pipeline da configurare e mantenere non è facilmente giustificabile. 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. uvu non fornisce una modalità di osservazione intelligente per rieseguire i test modificati, mentre Vitest ti offre una DX straordinaria grazie alla modalità di osservazione predefinita che utilizza l'Hot Module Reload (HMR) istantaneo di Vite. uvu è un'opzione veloce per eseguire test semplici, ma Vitest può risultare più veloce e affidabile per progetti più complessi.