Come configurare Jest per i test di reazione?

Man mano che sempre più sviluppatori adottano React come framework di front-end preferito, diventa sempre più importante garantire che il codice che scriviamo sia della massima qualità. Un aspetto importante della garanzia della qualità è il test e Jest è un popolare framework di test che viene spesso utilizzato con React.

Jest è un framework di test open source creato da Facebook ed è progettato per rendere il test del codice JavaScript il più semplice ed efficiente possibile. È veloce, ha un'API facile da usare e viene fornito con una serie di funzionalità integrate che rendono i test un gioco da ragazzi.

In questo articolo, ti guideremo attraverso il processo di configurazione di Jest per i test React. Tratteremo tutto ciò che devi sapere per iniziare, dall'installazione di Jest alla scrittura del tuo primo caso di test.

Jest per i test di reazione

Jest è un popolare framework di test utilizzato per testare le applicazioni React. È stato creato da Facebook ed è noto per la sua facilità d'uso e tempi di configurazione rapidi. Jest è progettato per funzionare immediatamente con React e offre molte funzionalità per semplificare i test.

Ecco alcune delle funzionalità che rendono Jest una scelta popolare per testare le applicazioni React:

i) Test di istantanee: Jest fornisce una funzione di test di istantanee che consente di confrontare l'output corrente di un componente con un'istantanea archiviata in precedenza. In questo modo è facile verificare se sono state apportate modifiche indesiderate all'output del componente.

ii) Mocking: Jest fornisce funzionalità di mocking integrate che consentono di creare funzioni e moduli fittizi. Ciò è utile quando è necessario simulare il comportamento di una funzione o di un modulo che non è immediatamente disponibile o è difficile da testare.

iii) Copertura del codice: Jest fornisce un report sulla copertura del codice che mostra la percentuale di codice coperta dai test. Ciò è utile per identificare le aree del codice che non sono state testate e potrebbero richiedere ulteriore attenzione.

iv) Test asincrono: Jest semplifica il test del codice asincrono fornendo utilità per la gestione del codice asincrono. Ciò consente di scrivere test che attendono la risoluzione di promesse o altro codice asincrono prima di effettuare asserzioni.

v) Configurazione semplice: Jest è facile da configurare e configurare per la tua applicazione React. Viene fornito con una configurazione predefinita che funziona immediatamente, ma può essere personalizzata per soddisfare le tue esigenze specifiche.

Nel complesso, Jest è un framework di test potente e flessibile che semplifica il test delle applicazioni React. Le sue numerose funzionalità e la facile configurazione lo rendono una scelta popolare per gli sviluppatori che desiderano scrivere test affidabili per i loro componenti React.

Configurazione di Jest per i test React

Ci sono alcuni passaggi che devi seguire per configurare Jest per i test React nel 2023.

1) Installa Jest

Jest può essere installato nel tuo progetto usando npm o filato. Ecco i passaggi per installare Jest usando npm:

i) Aprire il terminale o il prompt dei comandi e accedere alla directory del progetto.

ii) Esegui il seguente comando per installare Jest come dipendenza di sviluppo nel tuo progetto:

npm install –save-dev jest

Questo comando installerà Jest e lo aggiungerà al file package.json del progetto nella sezione devDependencies.

Una volta completata l'installazione, puoi iniziare a scrivere i tuoi test usando Jest. Puoi eseguire i tuoi test usando il comando npm test. Per impostazione predefinita, Jest cerca i file di test denominati con l'estensione .test.js o .spec.js . Tuttavia, puoi configurare Jest per cercare test con altre estensioni modificando la proprietà testMatch nel tuo file di configurazione Jest.

Questo è tutto! Ora hai installato Jest nel tuo progetto e puoi iniziare a scrivere test per la tua applicazione.

2) Creare un file di configurazione

Per creare un file di configurazione per Jest, puoi creare un file denominato jest.config.js nella directory principale del tuo progetto. Questo file conterrà le opzioni di configurazione che Jest dovrebbe utilizzare durante l'esecuzione dei test.

Ecco un esempio di file di configurazione:

modulo.esporta = {

// Indica quali tipi di file devono essere considerati come file di prova.

provaMatch: [

'**/__test__/**/*.js?(x)',

'**/?(*.)+(spec|test).js?(x)'

],

// Un elenco di percorsi delle directory che Jest deve utilizzare per cercare i file.

radici: ['<rootDir>/src'],

// Una mappa dalle espressioni regolari ai percorsi ai trasformatori.

trasformare: {

'^.+\\.(js|jsx|ts|tsx)$': 'babel-scherzo'

},

// I modelli glob utilizzati da Jest per rilevare i file di test.

testPathIgnorePatterns: [

'<rootDir>/node_modules/',

'<rootDir>/build/'

],

// Un elenco di nomi di giornalisti che Jest utilizza durante la scrittura di rapporti di copertura.

coverageReporters: ['json', 'text', 'html'],

// Un array di estensioni di file usate dai tuoi moduli.

moduleFileExtensions: ['js', 'json', 'jsx']

};

Questo file di configurazione di esempio specifica le seguenti opzioni:

a) testMatch: specifica il modello utilizzato per identificare i file di test.

b) root: specifica le directory in cui Jest dovrebbe cercare i file.

c) transform: specifica le trasformazioni che Jest dovrebbe applicare ai file prima di eseguire i test.

d) testPathIgnorePatterns: specifica i modelli da ignorare durante la ricerca dei file di test.

e) coverageReporters: specifica i reporter che Jest dovrebbe utilizzare per generare report di copertura.

f) moduleFileExtensions: specifica le estensioni dei file che Jest dovrebbe cercare durante la ricerca dei file.

È possibile modificare questo file di configurazione per adattarlo alle esigenze del proprio progetto. Una volta creato il file di configurazione, Jest lo utilizzerà automaticamente durante l'esecuzione dei test nel progetto.

3) Scrivi i tuoi test

Una volta installato Jest e impostato il file di configurazione, puoi iniziare a scrivere test per la tua applicazione React. Ecco i passaggi per creare un file di test e scrivere un test:

i) Creare un nuovo file con estensione .test.js o .spec.js . Questo sarà il tuo file di prova.

ii) Nel file di test, importare il componente o la funzione che si desidera testare:

import { sum } from './myFunctions';

iii) Scrivi il tuo test. Un test è una funzione che utilizza l'API Jest per verificare che il componente o la funzione si comporti come previsto:

describe('somma', () => {

test('somma 1 + 2 uguale a 3', () => {

aspettarsi(somma(1, 2)).toBe(3);

});

});

In questo esempio, stiamo testando una semplice funzione di somma che somma due numeri. La funzione describe raggruppa i test correlati, mentre la funzione test specifica un singolo caso di test. La funzione di previsione verifica che la funzione di somma restituisca il valore previsto.

iv) Eseguire i test eseguendo il comando npm test nella directory del progetto. Jest cercherà i file di test nel tuo progetto ed eseguirà tutti i test che trova.

Puoi aggiungere tutti i test di cui hai bisogno per coprire tutte le funzionalità del tuo componente o funzione. Jest fornisce una vasta gamma di corrispondenze e altre utilità che puoi utilizzare per creare test più complessi.

Scrivendo test per la tua applicazione React, puoi assicurarti che il tuo codice funzioni come previsto ed evitare di introdurre regressioni mentre apporti modifiche alla tua base di codice.

4) Esegui i tuoi test

Per eseguire i test utilizzando Jest, puoi utilizzare il comando npm test nella directory del progetto. Jest rileverà ed eseguirà automaticamente tutti i file di test nel progetto che corrispondono al modello specificato nel file di configurazione di Jest.

Quando esegui npm test, Jest emetterà i risultati dei tuoi test nella console. Se tutti i test vengono superati, Jest visualizzerà un riepilogo dei risultati del test:

PASS src/components/Example.test.js

✓ rendering senza arresti anomali (21ms)

Suite di test: 1 superato, 1 totale

Test: 1 superato, 1 totale

Istantanee: 0 totali

Tempo: 3.204s, stimato 4s

Ho eseguito tutte le suite di test.

Se un test fallisce, Jest visualizzerà un messaggio di errore che descrive l'errore e la posizione del test fallito:

FAIL src/components/Example.test.js

• Componente di esempio › esegue il rendering senza arresti anomali

TypeError: impossibile leggere la proprietà 'mappa' di undefined

10 | rendere() {

11 | const { articoli } = this.props;

> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);

| ^

13 | }

14 | }

15 |

in Esempio.render (src/components/Esempio.js:12:17)

su ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)

in Object.<anonimo> (src/components/Example.test.js:9:16)

Suite di test: 1 non riuscita, 1 in totale

Test: 1 fallito, 1 totale

Istantanee: 0 totali

Tempo: 3.537s, stimato 4s

Ho eseguito tutte le suite di test.

Jest fornisce anche una gamma di opzioni che puoi utilizzare per personalizzare il comportamento dei tuoi test, come l'esecuzione di test in modalità watch, la generazione di report sulla copertura del codice e altro ancora. Puoi trovare maggiori informazioni su queste opzioni nella documentazione di Jest.

Avvolgendo

LambdaTest è una potente piattaforma di test basata su cloud che può essere utilizzata insieme a Jest per testare le applicazioni React. Sfruttando la scalabilità dell'infrastruttura basata su cloud di LambdaTest, puoi eseguire in modo rapido ed efficiente i tuoi test Jest su un'ampia gamma di browser e dispositivi, assicurandoti che la tua applicazione funzioni come previsto in ambienti diversi.

In questo blog, abbiamo coperto i passaggi necessari per configurare Jest per testare le applicazioni React. Abbiamo anche imparato a configurare Jest per utilizzare LambdaTest come ambiente di test, scrivere test utilizzando Jest ed eseguire test sull'infrastruttura basata su cloud di LambdaTest.

L'uso combinato di LambdaTest e Jest fornisce una solida soluzione di test per gli sviluppatori React che può aiutarli a rilevare regressioni e bug all'inizio del ciclo di sviluppo, migliorando la qualità complessiva delle loro applicazioni.

Quindi, se stai cercando di semplificare il tuo flusso di lavoro di test React, prendi in considerazione l'utilizzo di LambdaTest e Jest insieme per ottenere test completi, scalabili ed efficienti per le tue applicazioni React.