Cum se configurează Jest pentru testarea React?

Pe măsură ce din ce în ce mai mulți dezvoltatori adoptă React ca cadru front-end de alegere, devine din ce în ce mai important să ne asigurăm că codul pe care îl scriem este de cea mai înaltă calitate. Un aspect important al asigurării calității este testarea, iar Jest este un cadru de testare popular care este adesea folosit cu React.

Jest este un cadru de testare open-source care este construit de Facebook și este conceput pentru a face testarea codului JavaScript cât mai ușor și eficient posibil. Este rapid, are un API ușor de utilizat și vine cu o serie de funcții încorporate care fac testarea o ușoară.

În acest articol, vă vom ghida prin procesul de configurare a testării Jest pentru React. Vom acoperi tot ce trebuie să știți pentru a începe, de la instalarea Jest până la scrierea primului dvs. caz de testare.

Glumește pentru testarea reacției

Jest este un cadru de testare popular folosit pentru testarea aplicațiilor React. Este creat de Facebook și este cunoscut pentru ușurința în utilizare și timpul de configurare rapid. Jest este proiectat să funcționeze cu React și oferă multe funcții pentru a ușura testarea.

Iată câteva dintre caracteristicile care fac din Jest o alegere populară pentru testarea aplicațiilor React:

i) Testare instantanee: Jest oferă o funcție de testare a instantanee care vă permite să comparați ieșirea curentă a unei componente cu un instantaneu stocat anterior. Acest lucru facilitează verificarea dacă s-au făcut modificări neintenționate la ieșirea componentei.

ii) Batjocură: Jest oferă capabilități de batjocură încorporate care vă permit să creați funcții și module simulate. Acest lucru este util atunci când trebuie să simulați comportamentul unei funcții sau al unui modul care nu este ușor disponibil sau este dificil de testat.

iii) Acoperirea codului: Jest oferă un raport de acoperire a codului care arată procentul de cod acoperit de testele dvs. Acest lucru este util pentru identificarea zonelor din codul dvs. care nu sunt testate și care pot necesita atenție suplimentară.

iv) Testare asincronă: Jest facilitează testarea codului asincron, oferind utilități pentru gestionarea codului asincron. Acest lucru vă permite să scrieți teste care așteaptă ca promisiunile sau alt cod asincron să se rezolve înainte de a face afirmații.

v) Configurare ușoară: Jest este ușor de configurat și configurat pentru aplicația dvs. React. Vine cu o configurație implicită care funcționează imediat, dar poate fi personalizată pentru a se potrivi nevoilor dumneavoastră specifice.

În general, Jest este un cadru de testare puternic și flexibil, care facilitează testarea aplicațiilor React. Numeroasele sale caracteristici și configurarea ușoară îl fac o alegere populară pentru dezvoltatorii care doresc să scrie teste de încredere pentru componentele lor React.

Configurarea Jest pentru testarea React

Există anumiți pași pe care trebuie să îi urmați pentru a configura testarea Jest pentru React în 2023.

1) Instalați Jest

Jest poate fi instalat în proiectul dvs. folosind npm sau yarn. Iată pașii pentru a instala Jest folosind npm:

i) Deschideți terminalul sau promptul de comandă și navigați la directorul proiectului.

ii) Rulați următoarea comandă pentru a instala Jest ca dependență de dezvoltare în proiectul dvs.:

npm install –save-dev jest

Această comandă va instala Jest și îl va adăuga la fișierul package.json al proiectului dvs. din secțiunea devDependencies.

Odată ce instalarea este finalizată, puteți începe să vă scrieți testele folosind Jest. Puteți rula testele folosind comanda npm test. În mod implicit, Jest caută fișiere de testare care sunt denumite cu extensia .test.js sau .spec.js . Cu toate acestea, puteți configura Jest să caute teste cu alte extensii modificând proprietatea testMatch din fișierul de configurare Jest.

Asta este! Acum aveți Jest instalat în proiect și puteți începe să scrieți teste pentru aplicația dvs.

2) Creați un fișier de configurare

Pentru a crea un fișier de configurare pentru Jest, puteți crea un fișier numit jest.config.js în directorul rădăcină al proiectului. Acest fișier va conține opțiunile de configurare pe care Jest ar trebui să le folosească atunci când rulează teste.

Iată un exemplu de fișier de configurare:

module.exports = {

// Indică ce tipuri de fișiere ar trebui considerate fișiere de testare.

testMatch: [

„**/__teste__/**/*.js?(x)”,

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

],

// O listă de căi către directoare pe care Jest ar trebui să le folosească pentru a căuta fișiere în.

rădăcini: ['<rootDir>/src'],

// O hartă de la expresiile regulate la căile către transformatoare.

transforma: {

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

},

// Modelele glob pe care le folosește Jest pentru a detecta fișierele de testare.

testPathIgnorePatterns: [

„<rootDir>/node_modules/”,

„<rootDir>/build/”

],

// O listă cu numele reporterilor pe care Jest le folosește atunci când scrie rapoarte de acoperire.

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

// O serie de extensii de fișiere utilizate de modulele dvs.

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

};

Acest exemplu de fișier de configurare specifică următoarele opțiuni:

a) testMatch: Specifică modelul utilizat pentru a identifica fișierele de testare.

b) roots: Specifică directoarele în care Jest ar trebui să caute fișiere.

c) transform: Specifică transformările pe care Jest trebuie să le aplice fișierelor înainte de a rula teste.

d) testPathIgnorePatterns: Specifică tiparele de ignorat la căutarea fișierelor de testare.

e) reporteri de acoperire: specifică reporterii pe care Jest ar trebui să îi folosească pentru a genera rapoarte de acoperire.

f) moduleFileExtensions: Specifică extensiile de fișiere pe care Jest ar trebui să le caute atunci când caută fișiere.

Puteți modifica acest fișier de configurare pentru a se potrivi nevoilor proiectului dumneavoastră. Odată ce ați creat fișierul de configurare, Jest îl va folosi automat când rulează teste în proiectul dvs.

3) Scrieți-vă testele

Odată ce ați instalat Jest și configurat fișierul de configurare, puteți începe să scrieți teste pentru aplicația dvs. React. Iată pașii pentru a crea un fișier de test și pentru a scrie un test:

i) Creați un fișier nou cu extensia .test.js sau .spec.js . Acesta va fi fișierul dvs. de testare.

ii) În fișierul de testare, importați componenta sau funcția pe care doriți să o testați:

import { sum } din './myFunctions';

iii) Scrieți testul. Un test este o funcție care utilizează API-ul Jest pentru a verifica dacă componenta sau funcția se comportă conform așteptărilor:

descrie('suma', () => {

test('adaugă 1 + 2 la 3', () => {

astept(suma(1, 2)).toBe(3);

});

});

În acest exemplu, testăm o funcție simplă de sumă care adună două numere. Funcția descrie grupează testele asociate împreună, în timp ce funcția de testare specifică un singur caz de testare. Funcția așteptare verifică dacă funcția sumă returnează valoarea așteptată.

iv) Rulați testele executând comanda npm test în directorul de proiect. Jest va căuta fișiere de testare în proiectul dvs. și va executa toate testele pe care le găsește.

Puteți adăuga câte teste aveți nevoie pentru a acoperi toată funcționalitatea componentei sau a funcției dvs. Jest oferă o gamă largă de potriviri și alte utilități pe care le puteți utiliza pentru a crea teste mai complexe.

Scriind teste pentru aplicația dvs. React, vă puteți asigura că codul funcționează conform așteptărilor și puteți evita introducerea regresiilor pe măsură ce faceți modificări în baza de cod.

4) Rulați-vă testele

Pentru a rula testele folosind Jest, puteți utiliza comanda npm test din directorul proiectului. Jest va detecta și rula automat orice fișiere de testare din proiectul dvs. care se potrivesc cu modelul specificat în fișierul de configurare Jest.

Când rulați testul npm, Jest va afișa rezultatele testelor dvs. în consolă. Dacă toate testele trec, Jest va afișa un rezumat al rezultatelor testului:

PASS src/components/Example.test.js

✓ redă fără blocare (21 ms)

Suite de testare: 1 promovat, 1 total

Teste: 1 promovat, 1 total

Instantanee: 0 total

Timp: 3.204s, estimat 4s

A rulat toate suitele de testare.

Dacă vreun test eșuează, Jest va afișa un mesaj de eroare care descrie eșecul și locația testului eșuat:

FAIL src/components/Example.test.js

• Exemplu de componentă › se redă fără blocare

TypeError: Nu se poate citi proprietatea „harta” a lui undefined

10 | randa() {

11 | const { itemi } = this.props;

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

| ^

13 | }

14 | }

15 |

la Example.render (src/components/Example.js:12:17)

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

la Object.<anonim> (src/components/Example.test.js:9:16)

Suite de testare: 1 eșuat, 1 în total

Teste: 1 eșuat, 1 în total

Instantanee: 0 total

Timp: 3.537s, estimat 4s

A rulat toate suitele de testare.

Jest oferă, de asemenea, o serie de opțiuni pe care le puteți utiliza pentru a personaliza comportamentul testelor, cum ar fi rularea de teste în modul ceas, generarea de rapoarte de acoperire a codului și multe altele. Puteți găsi mai multe informații despre aceste opțiuni în documentația Jest.

Încheierea

LambdaTest este o platformă puternică de testare bazată pe cloud, care poate fi utilizată împreună cu Jest pentru a testa aplicațiile React. Prin valorificarea scalabilității infrastructurii bazate pe cloud a LambdaTest, puteți rula rapid și eficient testele dvs. Jest pe o gamă largă de browsere și dispozitive, asigurându-vă că aplicația dvs. funcționează conform așteptărilor în diferite medii.

În acest blog, am acoperit pașii necesari pentru a configura Jest pentru testarea aplicațiilor React. De asemenea, am învățat cum să configuram Jest să utilizeze LambdaTest ca mediu de testare, să scriem teste folosind Jest și să executăm teste pe infrastructura bazată pe cloud a LambdaTest.

Folosirea LambdaTest și Jest împreună oferă o soluție robustă de testare pentru dezvoltatorii React, care îi poate ajuta să detecteze regresii și erori la începutul ciclului de dezvoltare, îmbunătățind calitatea generală a aplicațiilor lor.

Deci, dacă doriți să vă simplificați fluxul de lucru de testare React, luați în considerare utilizarea LambdaTest și Jest împreună pentru a realiza testare cuprinzătoare, scalabilă și eficientă pentru aplicațiile dvs. React.