În acest articol, vă voi prezenta un instrument de testare React numit Jest, împreună cu populara bibliotecă Enzyme, care este concepută pentru a testa componentele React. Vă voi prezenta tehnicile de testare Jest, inclusiv: efectuarea de teste, testarea componentelor React, testarea instantanee și batjocorirea. Dacă sunteți nou în testare și vă întrebați cum să începeți, veți găsi acest tutorial util, deoarece vom începe cu o introducere în testare. Până la sfârșit, veți fi activ și veți testa aplicațiile React folosind Jest și Enzyme. Ar trebui să fiți familiarizat cu React pentru a urma acest tutorial.

O scurtă introducere în testare

Testarea este o revizuire linie cu linie a modului în care se va executa codul. O suită de teste pentru o aplicație cuprinde diverși bit de cod pentru a verifica dacă o aplicație se execută cu succes și fără eroare. Testarea este, de asemenea, utilă atunci când se fac actualizări ale codului. După actualizarea unei bucăți de cod, puteți rula un test pentru a vă asigura că actualizarea nu întrerupe funcționalitatea deja în aplicație.

De ce Testați?

Este bine să înțelegem de ce facem ceva înainte de a o face. Deci, de ce testați și care este scopul acestuia?

1. Primul scop al testării este de a preveni regresia. Regresia este reapariția unui bug care fusese remediat anterior. Face ca o caracteristică să nu mai funcționeze așa cum este prevăzut după ce are loc un anumit eveniment.
2. Testarea asigură funcționalitatea componentelor complexe și a aplicațiilor modulare.
3. Testarea este necesară pentru performanța eficientă a unei aplicații software sau a unui produs.

Testarea face o aplicație mai robustă și mai puțin predispusă la erori. Este o modalitate de a verifica dacă codul dvs. face ceea ce doriți și că aplicația dvs. funcționează așa cum este destinat utilizatorilor dvs.

Să trecem peste tipurile de testare și ce fac acestea.

Test unitar

În acest tip de testare, sunt testate unități sau componente individuale ale software-ului. O unitate poate fi o funcție, metodă, procedură, modul sau obiect individual. Un test unitar izolează o secțiune de cod și verifică corectitudinea acesteia, pentru a valida dacă fiecare unitate a codului software-ului funcționează conform așteptărilor.

În testarea unitară, procedurile sau funcțiile individuale sunt testate pentru a garanta că funcționează corect și toate componentele sunt testate individual. De exemplu, testarea unei funcții sau dacă o instrucțiune sau o buclă dintr-un program funcționează corect ar intra în domeniul testării unitare.

Testul componentelor

Testarea componentelor verifică funcționalitatea unei părți individuale a unei aplicații. Testele sunt efectuate pe fiecare componentă separat de celelalte componente. În general, aplicațiile React sunt alcătuite din mai multe componente, astfel încât testarea componentelor se ocupă de testarea acestor componente individual.

De exemplu, luați în considerare un site web care are diferite pagini web cu multe componente. Fiecare componentă va avea propriile sale subcomponente. Testarea fiecărui modul fără a lua în considerare integrarea cu alte componente este denumită testarea componentelor.

Testarea astfel în React necesită instrumente mai sofisticate. Deci, am avea nevoie de Jest și uneori de instrumente mai sofisticate, precum Enzyme, despre care vom discuta pe scurt mai târziu.

Test instantaneu

Un test instantaneu se asigură că interfața cu utilizatorul (UI) a unei aplicații web nu se schimbă în mod neașteptat. Captează codul unei componente la un moment dat, astfel încât să putem compara componenta într-o stare cu orice altă stare posibilă pe care o poate avea.

Vom afla despre testarea instantanee într-o secțiune ulterioară.

Avantajele și dezavantajele testării

Testarea este grozavă și ar trebui făcută, dar are avantaje și dezavantaje.

Avantaje

1. Previne regresia neașteptată.
2. Acesta permite dezvoltatorului să se concentreze pe sarcina curentă, mai degrabă decât să-și facă griji pentru trecut.
3. Permite construirea modulară a unei aplicații care altfel ar fi prea complexă de construit.
4. Reduce necesitatea verificării manuale.
   

Dezavantaje

1. Trebuie să scrieți mai mult cod, precum și să depanați și să întrețineți.
2. Eșecurile testelor non-critice pot determina respingerea aplicației din punct de vedere al integrării continue.

Introducere în Jest

Jest este un cadru de testare JavaScript încântător, cu accent pe simplitate. Poate fi instalat cu npm sau Yarn. Jest se încadrează într-o categorie mai largă de utilități cunoscute sub numele de alergători de testare. Funcționează excelent pentru aplicațiile React, dar funcționează excelent și în afara aplicațiilor React.

Enzyme este o bibliotecă care este utilizată pentru a testa aplicațiile React. Este conceput pentru a testa componente și face posibilă scrierea de afirmații care simulează acțiuni care confirmă dacă interfața de utilizare funcționează corect.

Jest și Enzyme se completează atât de bine, așa că în acest articol le vom folosi pe ambele.

Procesul de a rula un test cu gluma

În această secțiune, vom instala Jest și vom scrie teste. Dacă sunteți nou în React, atunci vă recomand să utilizați aplicația Create React, deoarece este gata de utilizare și se livrează cu Jest.

 npm init react-app my-app

Trebuie să instalăm Enzyme **** și enzyme-adapter-react-16 cu react-test-renderer (numărul ar trebui să se bazeze pe versiunea de React pe care o utilizați).

 npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer

Acum că ne-am creat proiectul atât cu Jest, cât și cu Enzyme, trebuie să creăm un fișier setupTest.js în folderul src al proiectului. Fișierul ar trebui să arate astfel:

 import { configure } from "enzyme"; import Adapter from "enzyme-adapter-react-16"; configure({ adapter: new Adapter() });

Aceasta importă Enzyme și configurează adaptorul pentru a rula testele noastre.

Înainte de a continua, să învățăm câteva elemente de bază. Unele lucruri cheie sunt folosite foarte mult în acest articol și va trebui să le înțelegeți.

• it or test Veți trece o funcție acestei metode, iar runnerul de testare ar executa acea funcție ca un bloc de teste.
• describe Această metodă opțională este pentru gruparea oricărui număr de it sau de instrucțiuni de test .
• expect Aceasta este condiția pe care trebuie să o treacă testul. Compară parametrul primit cu potrivitorul. De asemenea, vă oferă acces la o serie de potriviri care vă permit să validați diferite lucruri. Puteți citi mai multe despre el în documentație.
• mount Această metodă redă DOM-ul complet, inclusiv componentele fii ale componentei părinte, în care rulăm testele.
• shallow Acest lucru redă numai componentele individuale pe care le testăm. Nu redă componentele copil. Acest lucru ne permite să testăm componente izolat.

Crearea unui fișier de testare

Cum știe Jest ce este un fișier de test și ce nu? Prima regulă este că orice fișier găsit în orice director cu numele __test__ este considerat un test. Dacă puneți un fișier JavaScript într-unul dintre aceste foldere, Jest va încerca să îl ruleze când îl suni pe Jest, la bine și la rău. A doua regulă este că Jest va recunoaște orice fișier cu sufixul .spec.js sau .test.js . Acesta va căuta numele tuturor folderelor și tuturor fișierelor din întregul depozit.

Să creăm primul nostru test, pentru o mini-aplicație React creată pentru acest tutorial. Îl poți clona pe GitHub. Rulați npm install pentru a instala toate pachetele, apoi npm start să lanseze aplicația. Verificați fișierul README.md pentru mai multe informații.

Să deschidem App.test.js pentru a scrie primul nostru test. Mai întâi, verificați dacă componenta aplicației noastre se redă corect și dacă am specificat o ieșire:

 it("renders without crashing", () => { shallow(<App />); }); it("renders Account header", () => { const wrapper = shallow(<App />); const welcome = <h1>Display Active Users Account Details</h1>; expect(wrapper.contains(welcome)).toEqual(true); });

În testul de mai sus, primul test, cu shallow , verifică dacă componenta aplicației noastre se redă corect, fără să se blocheze. Amintiți-vă că metoda shallow redă doar o singură componentă, fără componente secundare.

Al doilea test verifică dacă am specificat o ieșire de etichetă h1 de „Afișare cont de utilizator activ” în componenta aplicației noastre, cu un potrivire Jest de toEqual .

Acum, rulați testul:

 npm run test /* OR */ npm test

Ieșirea din terminalul dvs. ar trebui să fie așa:

 PASS src/App.test.js √ renders without crashing (34ms) √ renders Account header (13ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 11.239s, estimated 16s Ran all test suites related to changed files. Watch Usage: Press w to show more.

După cum puteți vedea, testul nostru a trecut. Arată că avem o suită de teste numită App.test.js , cu două teste de succes când a rulat Jest. Vom vorbi mai târziu despre testarea instantanee și veți vedea, de asemenea, un exemplu de test eșuat.

Omiterea sau izolarea unui test

Omiterea sau izolarea unui test înseamnă că atunci când rulează Jest, un test marcat specific nu este rulat.

 it.skip("renders without crashing", () => { shallow(<App />); }); it("renders Account header", () => { const wrapper = shallow(<App />); const header = <h1>Display Active Users Account Details</h1>; expect(wrapper.contains(header)).toEqual(true); });

Primul nostru test va fi omis deoarece am folosit metoda skip pentru a izola testul. Deci, nu va rula și nu va face nicio modificare testului nostru când rulează Jest. Doar al doilea va rula. De asemenea, îl puteți it.only() .

Este puțin frustrant să faci modificări la un fișier de testare și apoi să rulezi manual npm test din nou. Jest are o caracteristică frumoasă numită modul ceas, care urmărește modificările fișierelor și rulează teste în consecință. Pentru a rula Jest în modul ceas, puteți rula npm test -- --watch sau jest --watch . De asemenea, aș recomanda să lăsați Jest să ruleze în fereastra terminalului pentru restul acestui tutorial.

Funcția de batjocură

O imitație este o copie convingătoare a unui obiect sau modul fără nicio funcționare interioară reală. S-ar putea să aibă un pic de funcționalitate, dar în comparație cu lucrul real, este o batjocură. Poate fi creat automat de Jest sau manual.

De ce să ne batjocorim? Mocking-ul reduce numărul de dependențe - adică numărul de fișiere conexe care trebuie încărcate și analizate atunci când este rulat un test. Deci, folosirea multor simulari face ca testele să se execute mai rapid.

Funcțiile simulate sunt cunoscute și ca „spioni”, deoarece vă permit să spionați comportamentul unei funcții care este apelată direct de un alt cod, mai degrabă decât să testați doar rezultatul.

Există două moduri de a bate joc de o funcție: fie prin crearea unei funcții simulate pentru a o folosi în codul de testare, fie prin scrierea unui simulacro manual pentru a suprascrie o dependență de modul.

Machetele manuale **** sunt folosite pentru a elimina funcționalitatea cu date simulate. De exemplu, în loc să accesați o resursă de la distanță, cum ar fi un site web sau o bază de date, este posibil să doriți să creați o simulare manuală care vă permite să utilizați date false.

Vom folosi o funcție simulată în secțiunea următoare.

Testarea componentelor React

Secțiunea va combina toate cunoștințele pe care le-am dobândit până acum în înțelegerea modului de testare a componentelor React. Testarea presupune să vă asigurați că rezultatul unei componente nu s-a schimbat în mod neașteptat în altceva. Construirea componentelor în mod corect este de departe cea mai eficientă modalitate de a asigura o testare de succes.

Un lucru pe care îl putem face este să testăm elementele de recuzită ale componentelor - în special, să testăm dacă elementele de recuzită de la o componentă sunt trecute la alta. Jest și Enzyme API ne permit să creăm o funcție simulată pentru a simula dacă elementele de recuzită sunt transmise între componente.

Trebuie să trecem elementele de recuzită a contului de utilizator din componenta principală a App în componenta Account . Trebuie să oferim detalii despre contul de utilizator Account pentru a reda contul activ al utilizatorilor. Aici este utilă batjocura, permițându-ne să ne testăm componentele cu date false.

Să creăm o imitație pentru recuzita user :

 const user = { name: "Adeneye David", email: "[email protected]", username: "Dave", };

Am creat o funcție de simulare manuală în fișierul nostru de testare și am inclus-o în jurul componentelor. Să presupunem că testăm o bază de date mare de utilizatori. Accesarea bazei de date direct din fișierul nostru de testare nu este recomandabilă. În schimb, creăm o funcție simulată, care ne permite să folosim date false pentru a ne testa componenta.

 describe(" ", () => { it("accepts user account props", () => { const wrapper = mount(<Account user={user} />); expect(wrapper.props().user).toEqual(user); }); it("contains users account email", () => { const wrapper = mount(<Account user={user} />); const value = wrapper.find("p").text(); expect(value).toEqual("[email protected]"); }); }); describe(" ", () => { it("accepts user account props", () => { const wrapper = mount(<Account user={user} />); expect(wrapper.props().user).toEqual(user); }); it("contains users account email", () => { const wrapper = mount(<Account user={user} />); const value = wrapper.find("p").text(); expect(value).toEqual("[email protected]"); }); });

Avem două teste mai sus și folosim un strat de describe , care preia componenta testată. Specificând elementele de recuzită și valorile pe care ne așteptăm să le trecem de test, putem continua.

În primul test, verificăm dacă elementele de recuzită pe care le-am trecut la componenta montată sunt egale cu elementele de recuzită pe care le-am creat mai sus.

Pentru cel de-al doilea test, trecem recuzita utilizatorului la componenta Account montată. Apoi, verificăm dacă putem găsi elementul <p> care corespunde cu ceea ce avem în componenta Account . Când rulăm suita de teste, veți vedea că testul rulează cu succes.

De asemenea, putem testa starea componentei noastre. Să verificăm dacă starea mesajului de eroare este egală cu nulă:

 it("renders correctly with no error message", () => { const wrapper = mount( ); expect(wrapper.state("error")).toEqual(null); }); it("renders correctly with no error message", () => { const wrapper = mount( ); expect(wrapper.state("error")).toEqual(null); });

În acest test, verificăm dacă starea erorii componentei noastre este egală cu nulă, folosind un toEqual() . Dacă există un mesaj de eroare în aplicația noastră, testul va eșua la rulare.

În secțiunea următoare, vom analiza cum să testați componentele React cu testarea instantanee, o altă tehnică uimitoare.

Testare instantanee

Testarea instantanee captează codul unei componente la un moment dat, pentru a-l compara cu un fișier instantaneu de referință stocat alături de test. Este folosit pentru a urmări modificările din interfața de utilizare a unei aplicații.

Reprezentarea codului real al unui instantaneu este un fișier JSON, iar acest JSON conține o înregistrare a modului în care arăta componenta când a fost realizat instantaneul. În timpul unui test, Jest compară conținutul acestui fișier JSON cu ieșirea componentei în timpul testului. Dacă se potrivesc, testul trece; dacă nu, testul eșuează.

Pentru a converti un ambalaj Enzyme într-un format compatibil cu testarea instantanee Jest, trebuie să instalăm enzyme-to-json :

 npm install --save-dev enzyme-to-json

Să creăm testul nostru instantaneu. Când îl rulăm prima dată, instantaneul codului acelei componente va fi compus și salvat într-un nou folder __snapshots__ din directorul src .

 it("renders correctly", () => { const tree = shallow(<App />); expect(toJson(tree)).toMatchSnapshot(); });

Când testul de mai sus rulează cu succes, componenta actuală a UI va fi comparată cu cea existentă.

Acum, să rulăm testul:

 npm run test

Când rulează suita de teste, va fi generat un nou instantaneu și salvat în folderul __snapshots__ . Atunci când rulăm un test ulterior, Jest va verifica dacă componentele se potrivesc cu instantaneul.

După cum sa explicat în secțiunea anterioară, acea metodă shallow din pachetul Enzyme este folosită pentru a reda o singură componentă și nimic altceva. Nu redă componentele copil. Mai degrabă, ne oferă o modalitate frumoasă de a izola codul și de a obține informații mai bune la depanare. O altă metodă, numită mount , este folosită pentru a reda DOM-ul complet, inclusiv componentele fii ale componentei părinte, în care rulăm testele.

De asemenea, ne putem actualiza instantaneul. Să facem câteva modificări componentei noastre pentru a face testul să eșueze, ceea ce se va întâmpla deoarece componenta nu mai corespunde cu ceea ce avem în fișierul instantaneu. Pentru a face acest lucru, să schimbăm eticheta <h3> din componenta noastră de la <h3> Loading...</h3> în <h3>Fetching Users...</h3> . Când testul rulează, iată ce vom obține în terminal:

 FAIL src/App.test.js (30.696s) × renders correctly (44ms) ● renders correctly expect(received).toMatchSnapshot() Snapshot name: `renders correctly 1 - Snapshot + Received FAIL src/App.test.js (30.696s) × renders correctly (44ms) ● renders correctly expect(received).toMatchSnapshot() Snapshot name: `renders correctly 1 - Snapshot + Received

          Afișați detaliile contului utilizatorilor activi
        
        

    - Se încarcă...
    + Se preiau utilizatori...
        
      

       7 | it("se redă corect", ()
=> {
       8 | const wrapper = superficial ( );
    > 9 | așteptați(la Json(înveliș)).toMatchSnapshot();
         | ^ 10 | });
      11 |
      12 | /* it("se redă fără blocare", () => {

      la Obiect. (src/App.test.js:9:27)

 › 1 instantaneu a eșuat.
Rezumat instantaneu
 › 1 instantaneu a eșuat dintr-o suită de teste. Verificați modificările codului dvs. sau apăsați `u` pentru a le actualiza.

Suite de testare: 1 eșuat, 1 în total
Teste: 1 eșuat, 1 în total
Instantanee: 1 eșuat, 1 în total
Timp: 92.274s
A rulat toate suitele de testare legate de fișierele modificate.

Utilizarea ceasului: apăsați pe w pentru a afișa mai multe.

Dacă dorim ca testul nostru să treacă, fie vom schimba testul la starea anterioară, fie vom actualiza fișierul instantaneu. În linia de comandă, Jest oferă instrucțiuni despre cum să actualizați instantaneul. Mai întâi, apăsați w în linia de comandă pentru a afișa mai multe, apoi apăsați u pentru a actualiza instantaneul.

 › Press u to update failing snapshots.

Când apăsăm u pentru a actualiza instantaneul, testul va trece.

Concluzie

Sper că ți-a plăcut să lucrezi la acest tutorial. Am învățat câteva tehnici de testare Jest folosind biblioteca de testare a enzimelor. De asemenea, v-am prezentat procesul de rulare a unui test, testare a componentelor React, batjocură și testare instantanee. Dacă aveți întrebări, le puteți lăsa în secțiunea de comentarii de mai jos și voi fi bucuros să răspund la fiecare și să rezolv orice problemă cu dvs.

Resurse și lecturi suplimentare

• Gest documentație
• Documentația enzimelor
• „Cum să testați componentele React: Ghidul complet”, Mohammad Iqbal, freeCodeCamp
• „Testarea reacției cu gluma și enzima”, Dominic Fraser, CodeClan