Codul de testare este o practică confuză pentru mulți dezvoltatori. Acest lucru este de înțeles deoarece testele de scriere necesită mai mult efort, timp și abilitatea de a prevedea cazuri de utilizare posibile. Începătorii și dezvoltatorii care lucrează la proiecte mai mici preferă, de obicei, ignorarea testelor, din cauza lipsei de resurse și a forței de muncă.
Cu toate acestea, există câteva motive pentru care cred că ar trebui să vă testați componentele:
Reacția nu este deloc diferită. Când întreaga aplicație începe să se transforme într-o grămadă de componente care sunt greu de întreținut, testarea oferă stabilitate și consistență. Scrierea testelor din prima zi vă va ajuta să scrieți mai bine cod, să identificați bug-uri cu ușurință și să mențineți un flux de lucru mai bun.
În acest articol, vă voi face tot ce trebuie să știți pentru a scrie teste pentru componentele dvs. React. Voi acoperi, de asemenea, unele dintre cele mai bune practici și tehnici în timp ce ne aflăm la el. Să începem!
Testarea este procesul de verificare a faptului că noi aserțiuni de testare sunt adevărate și că acestea rămân valabile pe întreaga durată a aplicării. O afirmație de testare este o expresie booleană care se întoarce adevărată dacă nu există o eroare în codul dvs..
De exemplu, o afirmație ar putea fi ceva la fel de simplu: "Când navighează utilizatorul /Logare, un mod cu id-ul #Logare
ar trebui să devină.“Deci, în cazul în care se dovedește că ai dat peste cap componenta de conectare într-un fel, afirmația se va întoarce fals. Afirmații nu sunt limitate doar la ceea ce devine făcut-vă puteți face, de asemenea afirmații cu privire la modul în care aplicația răspunde la interacțiunile utilizatorilor și alte actiuni.
Există multe strategii automate de testare pe care dezvoltatorii de la front-end le utilizează pentru a-și testa codul. Ne vom limita discuția la doar trei paradigme de testare software care sunt populare cu React: testarea unității, testarea funcțională și testarea integrării.
Unitatea de testare este unul dintre veteranii de testare care este încă popular în cercurile de testare. După cum sugerează și numele, veți testa bucăți individuale de coduri pentru a verifica dacă acestea funcționează independent cum era de așteptat. Din cauza arhitecturii componente a React, testele unitare sunt o potrivire naturală. De asemenea, acestea sunt mai rapide, deoarece nu trebuie să vă bazați pe un browser.
Testele unității vă ajută să vă gândiți la fiecare componentă izolată și să o tratați ca funcții. Unitatea dvs. testează pentru o anumită componentă ar trebui să răspundă la următoarele întrebări:
Testele funcționale sunt folosite pentru a testa comportamentul unei părți a aplicației. Testele funcționale sunt de obicei scrise din perspectiva utilizatorului. O bucată de funcționalitate nu este, de obicei, limitată la o singură componentă. Poate fi o formă completă sau o pagină întreagă.
De exemplu, când construiți un formular de înscriere, s-ar putea implica componente pentru elementele formularului, alertele și eventualele erori. Componenta care devine redată după trimiterea formularului face parte, de asemenea, din această funcționalitate. Acest lucru nu necesită un renderer de browser deoarece vom folosi un DOM virtual în memorie pentru testele noastre.
Testarea integrării este o strategie de testare în care toate componentele individuale sunt testate ca grup. Încercări integrate de testare pentru replicarea experienței utilizatorului prin rularea testelor pe un browser real. Acest lucru este considerabil mai lent decât testarea funcțională și testele unității deoarece fiecare suită de testare este executată pe un browser live.
În React, testele unitare și testele funcționale sunt mai populare decât testele de integrare, deoarece sunt mai ușor de scris și de întreținut. Asta vom acoperi în acest tutorial.
Aveți nevoie de anumite instrumente și dependențe pentru a începe să efectuați testarea unitară și funcțională a aplicației dvs. React. Le-am enumerat mai jos.
Jest este un cadru de testare care necesită configurație zero și, prin urmare, este ușor de configurat. Este mult mai popular decât cadrele de testare precum Jasmine și Mocha, deoarece este dezvoltat de Facebook. Jest este, de asemenea, mai rapid decât restul, deoarece folosește o tehnică inteligentă pentru a paraleliza încercările între muncitori. În afară de aceasta, fiecare test rulează într-un mediu cu nisip pentru a evita conflictele dintre două teste succesive.
Dacă utilizați aplicația create-react, este livrată împreună cu Jest. Dacă nu, este posibil să instalați Jest și alte câteva dependențe. Puteți citi mai multe despre aceasta pe pagina de documentare oficială Jest.
Chiar dacă utilizați aplicația create-react-app, va trebui să instalați acest pachet pentru a face instantanee. Testarea instantanee face parte din biblioteca Jest. Deci, în loc să redați interfața de utilizare a întregii aplicații, puteți folosi rasterul de testare pentru a genera rapid o ieșire HTML serializabilă din DOM virtual. Puteți să o instalați după cum urmează:
fire adăugați react-test-renderer
reacționează-dom / test-utils constă în unele dintre utilitățile de testare furnizate de echipa React. Alternativ, puteți utiliza pachetul Enzyme lansat de Airbnb. Enzyme este mult mai bine decât ReactTestUtils pentru că este ușor să se afirme, manipula și traversa dvs. React de ieșire Componente. Vom începe testele cu React utils și apoi trecerea la Enzyme mai târziu.
Pentru a instala Enzyme, executați următoarea comandă.
fire adăugați enzime enzimă-adaptor-reacție-16
Adăugați codul la src / SetupTests.js.
import configure de la "enzimă"; adaptor de import din "enzima-adapter-react-16"; configurați (adaptor: adaptor nou ());
Există mai multe informații despre acest lucru în secțiunea Componente de testare a paginii de creație-reacție-aplicație.
Vom scrie teste pentru o aplicație demo simplă care afișează o vizualizare master / detaliu a unei liste de produse. Puteți găsi aplicația demo în repo GitHub. Aplicația constă dintr-o componentă de container cunoscută sub numele de ProductContainer
și trei componente de prezentare: Lista de produse
, Detalii produs
, și ProductHeader
.
. ├── pachet-lock.json ├── package.json ├── publice │ ├── index.html │ └── manifest.json ├── src │ │ │ ├── componente ├── App.js │ │ ├── ProductContainer.js │ │ ├── ProductDetails.jsx │ │ ├── ProductHeader.js │ │ ├── ProductList.jsx │ ├── index.js │ └── style.css
Acest demo este un bun candidat pentru testarea unitară și testarea funcțională. Puteți testa fiecare componentă în mod izolat și / sau puteți testa funcționalitatea listei de produse în ansamblu.
Odată ce ați descărcat demo-ul, creați un director cu numele __tests__interior / src / componente /. Apoi puteți stoca toate fișierele de testare legate de această funcționalitate în interiorul __tests__ director. Testerii numesc, de obicei, fișierele lor de testare ca fiind .spec.js sau .test.js-de exemplu, ProductHeader.test.js sau ProductHeader.spec.js.
Creeaza o ProductHeader.test.js dacă nu ați făcut-o deja. Iată ce vor face testele noastre:
descrie ( 'ProductHeader', () => l ( 'trece testul', () => aștepta (true) .toBeTruthy ();) ea ( 'lipsa de test' () => aștepta (false) .toBeTruthy ();))
Suita de testare începe cu a descrie
bloc, care este o funcție globală Jest care acceptă doi parametri. Primul parametru este titlul suitei de testare, iar al doilea parametru este implementarea reală. Fiecare aceasta()
într-o suită de testare corespunde unui test sau unui spec. Un test conține una sau mai multe așteptări care verifică starea codului.
se așteaptă (true) .toBeTruthy ();
În Jest, o așteptare este o afirmație care revine fie adevărată, fie falsă. Când toate afirmațiile dintr-un spec sunt adevărate, se spune că trec. În caz contrar, încercarea se spune că eșuează.
De exemplu, am creat două specificații de testare. Primul ar trebui să treacă în mod evident, iar cel de-al doilea ar trebui să eșueze.
Notă: toBeTruthy ()
este o potrivire predefinită. În Jest, fiecare matcher face o comparație între valoarea așteptată și valoarea reală și returnează un boolean. Există mai multe persoane disponibile, iar noi le vom examina într-un moment.
create-react-app a creat tot ce aveți nevoie pentru a executa suita de testare. Tot ce trebuie să faceți este să executați următoarea comandă:
test de fire
Ar trebui să vedeți ceva de genul:
Pentru a face testul de eșec, trebuie să înlocuiți toBeTruthy ()
matcher cu toBeFalsy ()
.
se așteaptă (fals) .toBeFalsy ();
Asta e!
După cum am menționat mai devreme, Jest folosește matematici pentru a compara valorile. Puteți să o utilizați pentru a verifica egalitatea, pentru a compara două numere sau șiruri și pentru a verifica corectitudinea expresiilor. Iată lista celor mai populare materiale disponibile în Jest.
a fi();
toBeNull ()
să fie definit()
toBeUndefined ()
toBeTruthy ()
toBeFalsy ()
toBeGreaterThan ()
toBeLesserThan ()
a se potrivi()
a conține()
Acesta este doar un gust. Puteți găsi toate materialele disponibile în documentele de referință.
În primul rând, vom scrie câteva teste pentru ProductHeader
componentă. Deschideți Fișierul ProductHeader.js dacă nu ați făcut-o deja.
import React, Component de la "reacție"; clasa ProductHeader extinde Component render () return (Pagina cu listele de produse
); ; default default ProductHeader;
Esti curios sa stii de ce am folosit o componenta de clasa aici in loc de o componenta functionala? Motivul este că este mai greu să testați componentele funcționale cu ReactTestUtils. Dacă sunteți curios să știți de ce, această discuție despre stack overflow are răspunsul.
Am putea scrie un test cu următoarele ipoteze:
h2
etichetă.h2
tag-ul ar trebui să aibă o clasă numită titlu
.Pentru a face o componentă și pentru a recupera nodurile DOM relevante, avem nevoie de ReactTestUtils. Eliminați specificațiile fictive și adăugați următorul cod:
import Reacționează de la "reacționează"; import ReactTestUtils de la "react-dom / test-utils"; import Listă de produse de la '... / ProductsList'; descrie ( 'ProductHeader Component' () => l ( 'are o etichetă h2', () => // test aici), ea ( 'este înfășurat în interiorul unei clase titlu' () => / / Test aici))
Pentru a verifica existența unui h2
nod, vom trebui mai întâi să facem elementele noastre React într-un nod DOM din document. Puteți face acest lucru cu ajutorul unor API-uri exportate de ReactTestUtils
. De exemplu, pentru a ne face pe noi
componentă, puteți face ceva de genul:
const component = ReactTestUtils.renderIntoDocument ();
Apoi, puteți extrage h2
tag-ul de la componenta cu ajutorul findRenderedDOMComponentWithTag ( 'tag-name')
. Verifică toate nodurile copilului și găsește nodul care se potrivește nume eticheta
.
Iată întreaga spec.
('are o etichetă h2', () => const component = ReactTestUtils.renderIntoDocument (); var h2 = ReactTestUtils.findRenderedDOMComponentWithTag (componenta, 'h2'); );
Încercați să o salvați și alergătorul dvs. trebuie să vă arate că testul a trecut. Asta e oarecum surprinzător pentru că nu avem aştepta()
declarație ca în exemplul nostru precedent. Majoritatea metodelor exportate de către ReactTestUtils au așteptări integrate în ele. În acest caz special, dacă utilitarul de testare nu reușește să găsească h2
eticheta, aceasta va arunca o eroare și testele vor eșua automat.
Acum, încercați să creați codul pentru al doilea test. Poți să folosești findRenderedDOMcomponentWithClass ()
pentru a verifica dacă există un nod cu clasa "titlu".
('are o clasă de titlu', () => const component = ReactTestUtils.renderIntoDocument (); var node = ReactTestUtils.findRenderedDOMComponentWithClass (component, 'title'); )
Asta e! Dacă totul merge bine, ar trebui să vedeți rezultatele în verde.
Deși tocmai am scris două specificații de testare, am acoperit o mulțime de teren în acest proces. În următorul articol, vom scrie câteva teste complete pentru pagina noastră de înscrieri pentru produse. Vom înlocui, de asemenea, ReactTestUtils cu Enzime. De ce? Enzima oferă o interfață la nivel înalt, care este foarte ușor de utilizat și prietenoasă pentru dezvoltatori. Rămâi acordat pentru a doua parte!
Dacă în orice moment vă simțiți blocați sau aveți nevoie de ajutor, spuneți-ne în comentarii.