Configurazione Jest e debug dei test basati su Jest

jest configuration debugging jest based tests

Informazioni su Jest Config, debug e confronto di Jest con altri framework di test JavaScript, in particolare Jest vs Mocha e Jest vs Jasmine:

In questo Serie di scherzi informativi , abbiamo esplorato tutto Testare app React, mock e spie usando Jest nel nostro ultimo tutorial.

In questo tutorial, impareremo di più sui file Jest Config e vedremo come è possibile eseguire il debug dei test Jest per la risoluzione dei problemi di uno o più test multipli.

Esploreremo anche alcune delle opzioni comunemente utilizzate nel file Jest Config che potrebbero essere impostate indipendentemente in un progetto o quelle che possono essere aggiunte come parte della configurazione package.json stessa.

Useremo Visual Studio Code per scrivere i nostri test Jest e useremo un'estensione o un plugin in VS Code per abilitare il supporto di debug per i test Jest.

Inoltre, confronteremo i diversi framework di test Javascript come Mocha e Jasmine con Jest e capiremo i pro ei contro l'uno dell'altro.

Cosa imparerai:

• C'è Config
  • # 1) Relativo alla copertura
  • # 2) Correlato alla simulazione
  • # 3) Test correlati
  • Tutorial video sulla configurazione IS
• Debug utilizzando Jest
  • # 1) Utilizzo del debugger nativo di Node
  • # 2) Utilizzo della configurazione di debug di VS Code
  • Esercitazione video sul debug IS
• C'è Mocha Vs Jasmine
• Conclusione
  • Lettura consigliata

C'è Config

La configurazione Jest può essere specificata in 3 modi

• Tramite una chiave nel file package.json.
• Tramite un file jest.config.js: file di configurazione scritto come modulo.
• Tramite un JSON che potrebbe essere utilizzato con l'opzione come flag –config.

Con tutti gli approcci di cui sopra, puoi ottenere lo stesso risultato. Vediamo il primo passaggio, ovvero l'aggiunta della configurazione Jest tramite una chiave nel file package.json.

Nel file package.json esistente, aggiungi una nuova chiave denominata 'jest'. Questo non è altro che un insieme di coppie chiave-valore in formato JSON. Tutte le opzioni di configurazione relative a Jest possono essere ulteriormente aggiunte a questa sezione nel file package.json.

software per punti vendita per ipad

Le opzioni di configurazione utilizzate più di frequente sono elencate di seguito.

# 1) Relativo alla copertura

collectCoverage, coverageThreshold, coverageReporters, coverageDirectory - Queste sono le opzioni più utilizzate. La copertura è una metrica importante e garantisce che il codice venga testato rispetto a una soglia predefinita.

Una spiegazione dettagliata di ciascuno di essi è la seguente:

# 1) collectCoverage: Questa opzione viene utilizzata per specificare se si desidera che il test runner Jest raccolga o meno le informazioni sulla copertura. Quando è impostato su true, il corridore Jest raccoglie le informazioni sulla copertura. Con questa opzione, la copertura verrà raccolta e visualizzata sulla console al termine dell'esecuzione del test come mostrato di seguito.

# 2) soglia di copertura: Questa impostazione ci consente di specificare i valori di soglia per la copertura in termini percentuali. Ciò è molto utile quando l'organizzazione o il team desidera aderire a un certo valore minimo di copertura senza il quale nessun codice può essere inviato o unito al ramo principale.

Vediamo come può essere utilizzato.

La copertura può essere specificata a livello globale, a livello di file o qualsiasi altra regex. Quando specificato a livello globale, tutta la soglia specificata dovrebbe corrispondere per tutti i file combinati nel progetto.

È anche possibile specificare la copertura a livello di file, cambiando 'globale' in nome file o regex. Le configurazioni della soglia possono variare a seconda del requisito.

# 3) coperturaReporter: Questa configurazione viene utilizzata per specificare quale reporter si desidera utilizzare per generare il report di copertura. Sono disponibili molti reporter esistenti come pacchetti NPM che potrebbero essere utilizzati per generare un report di copertura alla fine dell'esecuzione del test.

java coding intervista domande e risposte per esperti

# 4) copertura Directory: Questa impostazione consente all'utente di specificare la directory in cui salvare o mantenere i rapporti di copertura dopo la creazione.

Di seguito è riportato un esempio combinato dell'utilizzo di tutte le impostazioni di configurazione relative alla copertura.

Qui, abbiamo utilizzato 2 reporter di copertura, cioè lcov e text.Lcov è la copertura di linea di Linux ed è presente per impostazione predefinita e il reporter 'text' significa che l'output di copertura verrà visualizzato anche sulla console. Il report di copertura verrà generato nel percorso specificato nell'impostazione 'coverageDirectory'.

# 2) Correlato alla simulazione

I mock sono molto usati durante i test con Jest. Entrambe le opzioni di configurazione sottostanti consentono una facile configurazione e rimozione di mock.

• autoMocks: Quando impostato su true, deriderà tutti i moduli importati nel test per impostazione predefinita.
• clearMocks: Quando è impostato su true, questo cancellerà tutte le configurazioni / moduli simulati dopo ogni test, in modo che ogni test inizi con uno stato nuovo. Ciò può essere ottenuto anche utilizzando il metodo testCleanup o 'after', ma averlo in config lo rende ancora più semplice.

# 3) Test correlati

# 1) testTimeout: Questa configurazione viene utilizzata per fornire un'impostazione di timeout difficile per i test in millisecondi. Qualsiasi test che richieda più di questa soglia configurata verrà contrassegnato come non riuscito a causa di un'eccezione di timeout.

# 2) Globale: Questa configurazione viene utilizzata per impostare le variabili globali che dovrebbero essere disponibili con ogni test.

Proviamo a utilizzare una variabile globale nel test e vediamo se funziona come previsto.

Dopo aver eseguito questo test, il valore di globalVar dovrebbe essere registrato.

Dai un'occhiata Qui per l'elenco completo di tutte le opzioni di configurazione.

Tutorial video sulla configurazione IS

Debug utilizzando Jest

In questa sezione, cercheremo di capire come eseguire il debug di test scritti basati su Jest.

Applicheremo e comprenderemo 2 diversi modi in cui possiamo eseguire il debug dei test Jest.

1. Debugger nativo di Node e quindi utilizzando Chrome Inspector per eseguire il debug dei test.
2. Utilizzo della configurazione di debug di Visual Studio Code per eseguire il debug dei test all'interno dell'editor di Visual Studio Code stesso. Questo è il modo più comunemente usato per eseguire il debug poiché Visual Studio Code è l'editor predefinito preferito per la maggior parte dello sviluppo Javascript in questi giorni.

Ciascuno di questi approcci è spiegato di seguito in dettaglio.

# 1) Utilizzo del debugger nativo di Node

Per utilizzare il debugger nativo di Node JS, dobbiamo inserire la parola chiave 'debugger' nel test, dove vogliamo posizionare il punto di interruzione.

Una volta che l'esecutore del test incontra il file debugger comando, sospende l'esecuzione e se colleghiamo gli strumenti del debugger di Chrome, possiamo eseguire il debug del codice di test (così come della funzione in prova) utilizzando gli strumenti di Chrome.

Il browser Chrome è un prerequisito qui per utilizzare Native Debugger di Node.

Si prega di seguire i passaggi seguenti.

# 1) Aggiungi la parola chiave del debugger all'interno del test, ovvero nel punto in cui desideri che il test raggiunga il punto di interruzione, inserisci il comando 'debugger'

#Due) Eseguire il test utilizzando il flag –inspect-brk.

Utilizzare il comando seguente per eseguire il test in modalità breakpoint.

# 3) Collega il debugger del nodo in Chrome. Ora nel browser Chrome, vai a chrome: // inspect e connettiti al listener di destinazione creato dal passaggio precedente.

# 4) Continua l'esecuzione e vedrai che il punto di interruzione colpisce nell'ispettore del debugger di Chrome e puoi eseguire il debug dello stack di chiamate e dello stato dell'oggetto nel debugger di Chrome stesso.

Questo approccio al debug dei test Jest va bene ma non è molto intuitivo in quanto è necessario continuare a passare dall'editor di codice a Chrome e viceversa che causa molto attrito. Nella prossima sezione, vedremo i modi per configurare il debugger all'interno dello stesso editor di Visual Studio Code.

# 2) Utilizzo della configurazione di debug di VS Code

# 1) Seleziona la sezione Debug / Esegui di Visual Studio Code dal pannello di sinistra.

#Due) Ora aggiorneremo la configurazione di debug per i test jest. Per farlo, aggiungi una nuova configurazione selezionando l'opzione di menu.

# 3) Una volta selezionata l'opzione aggiungi configurazione, aprirà il file `launch.json` con il contenuto predefinito nel pannello dell'editor. Rimuovere il contenuto predefinito e copiare il contenuto di seguito per creare una configurazione di debug per i test Jest.

# 4) Salvare la configurazione del contenuto appena aggiunta che verrebbe utilizzata per eseguire il debug dei test Jest. Se leggi attentamente la configurazione, è simile a quello che abbiamo fatto quando abbiamo provato a connetterci al debugger dei nodi negli strumenti per sviluppatori di Chrome tramite il comando.

Il vantaggio di avere config qui è che i test verranno eseguiti / debuggati come parte dell'Editor stesso (in questo caso è VSCode) e non abbiamo bisogno di connetterci a nessuna applicazione esterna.

# 5) Una volta creata la configurazione di debug, è ora possibile aggiungere punti di interruzione ai test ed eseguirli utilizzando questa configurazione RUN. Ciò garantirà che il test si interrompa ai punti di interruzione e che sia possibile eseguire il debug dei valori e dello stato dell'oggetto nel punto di interruzione nel file di prova effettivo.

I punti di interruzione possono essere aggiunti facendo clic vicino ai numeri di riga nei file di codice.

# 6) Una volta aggiunto il punto di interruzione, possiamo selezionare la configurazione Esegui che abbiamo aggiunto nel passaggio 3 per eseguire / eseguire il debug del test.

# 7) Selezionando / facendo clic sul pulsante Esegui, dovresti essere in grado di vedere che l'esecuzione raggiunge il punto di interruzione che è stato posizionato e puoi ottenere maggiori dettagli come valori di ambiente / variabili, traccia dello stack, ecc. Al punto di interruzione.

I pulsanti di controllo del punto di interruzione / flusso del codice possono essere utilizzati per spostarsi al punto di interruzione successivo o spostarsi all'interno della funzione per ulteriori dettagli.

Video tutorial He ISDebug

C'è Mocha Vs Jasmine

Nella sezione seguente confronteremo Jest vs Mocha e Jest vs Jasmine su diversi parametri e compareremo funzionalità come Snapshot testing, Facilità di configurazione e Funzionalità di diversi framework.

come eseguire un file jar windows 10

Conclusione

In questo tutorial, abbiamo imparato i diversi modi in cui puoi eseguire il debug dei tuoi test Jest all'interno di Visual Studio Code o in Chrome Inspector utilizzando il debugger nativo di Node.

Abbiamo anche esplorato le opzioni di configurazione comunemente utilizzate nel file di configurazione Jest. La configurazione Jest aiuta a ottenere molte cose come la copertura del codice, i report HTML, l'impostazione di comportamenti fittizi, l'impostazione delle variabili globali, ecc.

Tutorial PREV | PRIMO Tutorial

Lettura consigliata

• Tutorial Jest - Test di unità JavaScript utilizzando Jest Framework
• Come testare le app React utilizzando Jest Framework
• Tutorial su Jasmine Framework che include Jasmine Jquery con esempi
• Build distribuite: configurazione Jenkins Master Slave
• Tecniche di debug in selenio: punti di interruzione, modalità di debug e altro
• Esercitazione sul test di configurazione con esempi
• Come configurare il framework di test Node.js: Tutorial Node.js
• 25 migliori framework e strumenti di test Java per test di automazione (parte 3)