Menu

Tutorial Jest - Test di unità JavaScript utilizzando Jest Framework

  • Principale
  • Altro
  • Tutorial Jest - Test di unità JavaScript utilizzando Jest Framework

jest tutorial javascript unit testing using jest framework

Prova Il Nostro Strumento Per Eliminare I Problemi

In questo tutorial di Jest, impareremo le varie funzionalità di Jest, Jest Matchers e come utilizzare il framework Jest per gli unit test JavaScript:

Jest è un framework di test Javascript creato da Facebook.

È progettato principalmente per app basate su React (che è anche costruito da Facebook), ma potrebbe essere utilizzato per scrivere scenari di automazione per qualsiasi codebase basato su Javascript.

In questo tutorial sul test di Jest, impareremo a conoscere le varie caratteristiche di Jest, i suoi matcher e vedremo come possiamo usare Jest con un esempio end to end. Esploreremo anche la copertura del codice utilizzando Jest.

C

Elenco dei tutorial in questa serie JEST

Tutorial n. 1: Tutorial Jest - Test di unità JavaScript con Jest Framework
Tutorial n. 2: Come testare le app React utilizzando Jest Framework
Tutorial n. 3: Configurazione Jest e debug dei test basati su Jest

Cosa imparerai:

Primi passi con Jest Testing

Alcuni dei vantaggi / caratteristiche di Jest sono riportati di seguito:

  1. Nessuna configurazione richiesta.
  2. Veloce: I test Jest vengono eseguiti in parallelo: questo a sua volta riduce notevolmente il tempo di esecuzione del test.
  3. Copertura del codice integrata: Jest supporta la copertura del codice fuori dagli schemi: questa è una metrica molto utile per tutte le pipeline di distribuzione basate su CI e l'efficacia complessiva dei test di un progetto.
  4. Test isolati e in modalità sandbox: Ogni test Jest viene eseguito nella propria sandbox, il che garantisce che due test non possano interferire o influenzarsi a vicenda.
  5. Potente supporto per il mocking: I test jest supportano tutti i tipi di derisione, che si tratti di derisione funzionale, derisione del timer o derisione di singole chiamate API.
  6. Supporta il test delle istantanee: Il test delle istantanee è rilevante dal punto di vista di React. Jest supporta l'acquisizione di un'istantanea del componente reattivo in fase di test, che può essere convalidato con l'output effettivo del componente. Ciò aiuta notevolmente a convalidare il comportamento del componente.

Jest Framework per JavaScript Unit Testing

In questa sezione, vedremo un esempio end to end per scrivere test utilizzando il framework JEST per una semplice funzione Javascript. In primo luogo, vediamo come installare il framework JEST nel nostro progetto

È l'installazione

Jest è semplicemente un pacchetto di nodi e può essere installato utilizzando qualsiasi gestore di pacchetti basato su nodi. Esempio, npm o filato.

Vediamo alcuni comandi di esempio che possono essere utilizzati per installare il pacchetto Jest.

yarn add --dev jest npm install --save-dev jest

Per installare il modulo Jest a livello globale, puoi semplicemente utilizzare il flag '-g' insieme al comando npm. Ciò consentirà di utilizzare i comandi Jest direttamente senza configurare il file del pacchetto per i test npm.

npm install -g jest

Utilizzo di Jest in un progetto basato sui nodi

Per utilizzare Jest in un progetto basato su nodi, utilizzare semplicemente i comandi della sezione precedente per installare il pacchetto del nodo per Jest.

Segui i passaggi seguenti per creare un progetto nodo dall'inizio e quindi installare Jest al suo interno.

# 1) Crea una cartella / directory con un nome come nome del tuo progetto, per esempio , myFirstNodeProject

#Due) Ora utilizzando il terminale o la riga di comando, vai al progetto creato nel passaggio precedente ed esegui lo script di inizializzazione npm utilizzando il comando seguente.

npm init

# 3) Una volta eseguito il comando precedente, verranno richieste diverse domande / parametri.

pulitore di sistema gratuito per Windows 7

Per esempio , il nome del progetto, la versione, ecc. Continua semplicemente a premere Invio (e accetta i valori di default). Una volta completato, vedrai un file package.json creato nel tuo progetto. Questo è un file di configurazione obbligatorio per qualsiasi progetto basato su nodi

# 4) Ora esegui il comando per installare il pacchetto Jest nel progetto appena creato usando il comando seguente.

npm install --save-dev jest

Questo installerà il modulo Jest (così come le sue dipendenze).

# 5) Ora, abbiamo un progetto di nodo pronto con i collegamenti Jest. Configuriamo lo script di test npm per eseguire i test Jest, ovvero quando viene eseguito il comando 'npm test', lo script dovrebbe eseguire tutti i test basati sul framework Jest.

Per fare ciò, aggiorna il file package.json e aggiungi una sezione di script come mostrato di seguito.

'scripts': { 'test': 'jest' }

Il file package.json finale apparirà come mostrato di seguito.

{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

Scrittura di test per una funzione Javascript

In questa sezione, creeremo un semplice codice funzione Javascript per addizione, sottrazione e moltiplicazione di 2 numeri e scriveremo i corrispondenti test basati su Jest per esso.

Innanzitutto, vediamo come appare il codice per la nostra applicazione (o funzione) in prova.

# 1) Nel progetto del nodo creato nella sezione precedente, crea un file js denominato calculator.js con i contenuti come mostrato di seguito

const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations

#Due) Ora, crea un file di test nella stessa cartella per questi test, denominato calcolatore.test.js - questa è la convenzione prevista dal framework Jest per cercare tutti i file che contengono test basati su Jest. Importeremo anche la funzione sotto test, per eseguire il codice nel test.

Ecco come apparirebbe il file con la sola dichiarazione di importazione / richiesta.

const mathOperations = require('./calculator');

# 3) Ora, scriviamo test per diversi metodi nel file principale, ad esempio somma, diff e prodotto.

I test Jest seguono i test in stile BDD, con ogni suite di test con un blocco di descrizione principale e può avere più blocchi di test. Inoltre, tieni presente che i test possono avere anche blocchi di descrizione nidificati.

il gateway predefinito non è disponibile correzione

Scriviamo un test per l'aggiunta di 2 numeri e convalidiamo i risultati attesi. Forniremo i numeri come 1 e 2 e ci aspettiamo che l'output sia 3.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })

Fare riferimento ai punti seguenti per il test sopra:

per) Il blocco di descrizione è una descrizione esterna per la suite di test, ovvero rappresenta un contenitore generico per tutti i test che scriveremo per la calcolatrice in questo file.

b) Successivamente, abbiamo un singolo blocco di test: questo rappresenta un singolo test. La stringa tra virgolette rappresenta il nome del test.

c) Fare riferimento al codice nel blocco delle aspettative: 'aspettarsi' non è altro che un'affermazione. L'istruzione chiama il metodo sum nella funzione sotto test con gli input 1 e 2 e si aspetta che l'output sia 3.

Possiamo anche riscriverlo in un modo più semplice per capirlo meglio.

Vedere di seguito, ora abbiamo separato la chiamata di funzione e l'asserzione come 2 istruzioni separate per renderlo più succinto.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })

d) Per eseguire questo test, è sufficiente eseguire il comando ' sopra il livello del mare 'Nel terminale o nel prompt dei comandi nella posizione del progetto.

Vedrai l'output come mostrato di seguito.

Eseguire il comando

# 4) Proviamo altri test.

per) Per prima cosa, scrivi un test fallito e guarda quale output otteniamo. Cambiamo semplicemente il risultato con un valore errato nello stesso test che abbiamo scritto nell'ultima sezione. Guarda come appare il test.

describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })

Qui ci aspettiamo che una somma di 1 e 2 restituisca 10 che non è corretto.

Proviamo a eseguirlo e vediamo cosa otteniamo.

output dettagliato quando un test non è riuscito

È possibile visualizzare l'output dettagliato quando un test non è riuscito, ovvero cosa è stato effettivamente restituito e cosa era previsto e quale riga ha causato l'errore nella funzione sotto test, ecc.

b) Scriviamo più test per le altre funzioni, ovvero differenza e prodotto.

Il file di test con tutti i test apparirà come mostrato di seguito.

const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })

Quando vengono eseguiti i test di cui sopra, viene generato l'output fornito di seguito.

Verifica l

Tutorial video: cos'è uno scherzo

C'è Matchers

Le asserzioni scherzose usano gli abbinamenti per affermare una condizione. Jest usa i matcher dall'aspettativa API. È possibile fare riferimento al documento API previsto Qui.

Esaminiamo alcuni dei matcher più comunemente usati insieme ai test Jest.

# 1) Uguaglianza

Questi sono i matcher più comunemente usati. Sono usati per controllare l'uguaglianza o la disuguaglianza e sono usati principalmente per le operazioni aritmetiche.

Vediamo alcuni esempi di seguito:

Qui abbiamo scritto 2 matcher usando toBe e not.toBe che sono analoghi a uguale e non uguale.

test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })

# 2) Verità

Qui vedremo, corrispondenze per valori nulli, falsi e veritieri, ovvero valori falsi e veri. È importante notare che tutto ciò che non è logicamente vero è falso.

Per esempio, numero 0, null, stringa vuota, NaN sono tutti esempi di falsy w.r.t Javascript.

test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })

# 3) Numero Matchers

Questi matcher potrebbero essere usati per operazioni aritmetiche generali.

Per esempio, maggiore di, minore di, maggiore di o uguale, ecc.

Controlla gli esempi seguenti per maggiori dettagli

test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })

# 4) String Matchers

Molte volte abbiamo bisogno di stringhe per abbinare un'espressione regolare come asserzione in uno unit test. Jest fornisce abbinamenti per stringhe da confrontare con un'espressione regolare.

test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })

Tutorial video: ci sono Matchers

Jest Hooks - Installazione e smontaggio

Proprio come tutti gli altri framework di unit test basati su xUnit, Jest framework fornisce anche hook per i metodi di configurazione e pulizia. Questi metodi hook vengono eseguiti prima e dopo ogni test nella suite di test o prima e dopo l'esecuzione di testSuite.

In totale ci sono 4 ganci disponibili per l'uso.

  • beforeEach e afterEach: Questi hook vengono eseguiti prima e dopo ogni test nella suite di test.
  • beforeAll e afterAll: Questi hook vengono eseguiti una sola volta per ogni suite di test. cioè se una suite di test ha 10 test, questi hook verranno eseguiti solo una volta per ogni esecuzione di test.

Vediamo un esempio: Aggiungeremo questi hook allo stesso esempio di test di aggiunta di 2 numeri.

Imposteremo gli input in beforeEach per l'illustrazione. Il file di test apparirà con gli hook di test come mostrato di seguito.

describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })

Suggerimenti e trucchi

# 1) I rapporti della riga di comando sono buoni ma non molto leggibili. Sono disponibili librerie / moduli per generare rapporti di test basati su HTML per i test Jest. Può essere ottenuto come mostrato di seguito.

domande di intervista test manuale per 4 anni di esperienza
  • Aggiungi il pacchetto del nodo per jest-html-reporter usando il comando seguente.
npm install --save-dev jest-html-reporter
  • Ora aggiungi la configurazione Jest per il reporter nel file package.json del progetto del nodo.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Una volta configurato ora, eseguire i test utilizzando il ' sopra il livello del mare 'Comando.
  • Se la configurazione ha esito positivo, dovresti essere in grado di vedere un report basato su HTML che viene creato nella directory del progetto.

Rapporto di prova

# 2) Creazione del rapporto sulla copertura del codice: La copertura del codice è una delle metriche più importanti dal punto di vista dei test di unità. Misura essenzialmente la percentuale di dichiarazioni / rami coperti per l'applicazione in prova.

Jest fornisce supporto immediato per la copertura del codice. Per ottenere il rapporto sulla copertura di Jest, C'è la configurazione deve essere aggiunto nel file package.json file.

Aggiungi la configurazione come mostrato di seguito:

'jest': { 'collectCoverage':true }

Una volta completata questa configurazione, prova a eseguire i test utilizzando il comando 'Test sul livello del mare' , e tu puoi vedere i dettagli della copertura del codice appena sotto i risultati dell'esecuzione del test come mostrato di seguito.

dettagli sulla copertura del codice

Tutorial video: copertura Jest e generazione di report HTML

Conclusione

In questo tutorial di Jest, abbiamo esaminato le basi del framework Jest. Abbiamo imparato come installare il framework Jest e abbiamo visto come può essere utilizzato per testare semplici file Javascript.

Abbiamo anche esplorato i diversi tipi di matcher supportati da Jest e coperto anche reporter HTML e rapporti di copertura del codice.

PROSSIMO Tutorial

Lettura consigliata

^