Testele de scriere pot fi plictisitoare și repetitive. S-ar putea să simți că pierzi timp prețios pe care l-ai folosi mai degrabă pentru a lucra la funcții. Cu toate acestea, dacă doriți să expediați aplicații în care aveți încredere, ar trebui să scrieți teste.
Testarea vă permite să detectați greșeli și erori pe care altfel le-ați putea livra utilizatorilor. Prin urmare, îmbunătățește experiența utilizatorului aplicației dvs. și vă scutește de a trebui să depanați codul de producție.
Puteți scrie cu ușurință teste în React folosind Jest și Biblioteca de testare React.
Ce ar trebui să testați în React?
A decide ce să testezi poate fi dificil. Deși testele sunt grozave, nu ar trebui să testați fiecare linie din aplicația dvs. React. Dacă procedați astfel, veți avea teste fragile care se întrerup cu cea mai mică schimbare în aplicația dvs.
În schimb, ar trebui să testați doar implementarea utilizatorului final. Aceasta înseamnă să testați modul în care utilizatorul final va folosi aplicația dvs. în loc să testați funcționarea interioară a aplicației.
Mai mult, asigurați-vă că testați cele mai utilizate componente din aplicația dvs., cum ar fi pagina de destinație sau componenta de conectare. De asemenea, testați cele mai importante caracteristici din aplicația dvs. De exemplu, acestea pot fi caracteristici care aduc bani, cum ar fi caracteristica coș de cumpărături.
Când decideți ce să testați, un lucru de reținut este să nu testați niciodată funcționalitatea pe care React o gestionează singur. De exemplu, în loc să testați validitatea elementelor de recuzită, puteți utiliza React PropTypes.
Testarea unei componente de buton
Amintiți-vă, ar trebui să testați doar implementarea utilizatorului final a unei componente și nu funcționarea sa internă. Pentru o componentă de buton, aceasta înseamnă verificarea că se redă fără să se blocheze și să se afișeze corect.
Creați un fișier nou în src folder numit Button.js și adăugați următorul cod.
funcţieButon({valoare}) {
întoarcere (
<buton>{valoare}</button>
)
}
exportMod implicit Buton
Button.js acceptă o prop numită valoare și o folosește ca valoare pentru buton.
Scrierea primului test
A aplicație create-react-app vine preinstalat cu Jest și biblioteca de testare React. Jest este o bibliotecă de testare ușoară, cu funcții de batjocură și afirmare încorporate. Funcționează cu mulți cadre JavaScript. Biblioteca de testare React, pe de altă parte, oferă funcții pentru a vă ajuta să testați modul în care utilizatorii interacționează cu componentele.
Creați un fișier nou numit Button.test.js în folderul src. În mod implicit, Jest identifică fișierele cu sufix .test.js ca fișiere de testare și le rulează automat. O altă opțiune este să adăugați fișierele de testare într-un folder numit __teste__.
Adăugați următorul cod în Button.test.js pentru a crea primul test.
import { randare } din '@testing-library/react';
import Buton din '../Buton';
descrie('Componenta butonului', () => {
Test('Redă componenta butonului fără să se blocheze', () => {
face(<Buton />);
});
})
Acest test definește mai întâi despre ce este vorba utilizând blocul descris oferit de Jest. Acest bloc este util pentru gruparea testelor conexe. Aici, grupați testele pentru componenta Button.
În interiorul blocului de descriere, aveți primul test din blocul de testare. Acest bloc acceptă un șir care descrie ce ar trebui să facă testul și o funcție de apel invers care execută așteptarea.
În acest exemplu, testul ar trebui să redă componenta Button fără să se blocheze. Metoda de randare din Biblioteca React Testing realizează testul propriu-zis. Verifică dacă componenta Button este redată corect. Dacă o face, testul trece, altfel eșuează.
Utilizarea rolurilor pentru a găsi butonul
Uneori doriți să verificați dacă elementul a fost montat. Metoda ecran are o funcție getByRole() pe care o puteți folosi pentru a prelua un element din DOM.
screen.getByRole('buton')
Apoi puteți utiliza elementul pe care l-ați luat pentru a efectua teste, cum ar fi verificarea dacă există în document sau dacă a fost redat corect.
getByRole() este una dintre multele interogări pe care le puteți utiliza pentru a selecta elemente dintr-o componentă. Consultați alte tipuri de interogări în The React Testing Library’s Ghidul „Ce interogare ar trebui să folosesc”. De asemenea, în afară de rolul „buton”, majoritatea elemente semantice HTML au roluri implicite pe care le puteți utiliza pentru a vă efectua interogările. Găsiți lista de roluri din Documente MDN.
Adăugați următoarele la blocul de testare pentru a verifica randările componente.
Test('Redă butonul fără să se blocheze', () => {
face(<Valoarea butonului="Inscrie-te" />);
așteptați (screen.getByRole('buton')).toBeInTheDocument()
});
Potrivirea toBeInTheDocument() verifică dacă elementul buton există în document.
Așteptați-vă ca butonul să se redeze corect
Componenta Button acceptă o valoare prop și o afișează. Pentru ca acesta să se redeze corect, valoarea pe care o afișează trebuie să fie aceeași cu cea pe care ați transmis-o.
Creați un nou bloc de testare și adăugați următorul cod.
Test('Redă corect butonul', () => {
face(<Valoarea butonului="Autentificare" />);
așteptați (screen.getByRole('buton')).toHaveTextContent("Autentificare")
})
Rețineți că nu trebuie să faceți curățări după teste când utilizați Biblioteca de testare React. În versiunile anterioare, ar trebui să faceți manual curățarea astfel:
după fiecare (curățare)
Acum, biblioteca de testare demontează componentele automat după fiecare randare.
Crearea de teste instantanee
Până acum, ați testat comportamentul componentei Button. Scrieți teste instantanee pentru a testa dacă ieșirea componentei rămâne aceeași.
Testele instantanee compară ieșirea curentă cu o ieșire stocată a componentei. De exemplu, dacă schimbați stilul unei componente Button, testul instantaneu vă va anunța. Puteți fie să actualizați instantaneul pentru a se potrivi cu componenta modificată, fie să anulați modificările de stil.
Testele instantanee sunt foarte utile ori de câte ori doriți să vă asigurați că interfața de utilizare nu se schimbă în mod neașteptat.
Testarea instantanee este diferită de testele unitare, deoarece trebuie să aveți deja cod de lucru pentru a crea instantaneul.
Veți folosi metoda de randare din pachetul react-test-renderer npm. Deci, executați următorul cod pentru a-l instala.
npm instalare reacţiona-Test-renderer
În Button.test.js, scrieți testul instantaneu după cum urmează:
Test('Se potrivește instantaneu', () => {
const tree = renderer.create(<Valoarea butonului="Autentificare" />).toJSON();
aştepta(copac).toMatchSnapshot();
})
Nu există instantanee existente pentru componenta Button, așa că rularea acestui test va crea un fișier instantaneu alături de fișierul de testare:
Buton
└─── __teste__
│ │ Buton.teste.js
│ └─── __instantaneu__
│ │ Buton.Test.js.snap
│
└─── Buton.js
Acum, când rulați următorul test, React va compara noul instantaneu pe care îl generează cu cel stocat.
Scrieți teste pentru cele mai utilizate componente
Acest tutorial v-a învățat cum să scrieți teste DOM și instantanee în React testând o componentă Button. Scrierea de teste pentru toate componentele pe care le creați poate fi plictisitoare. Cu toate acestea, aceste teste vă economisesc timpul pe care l-ați fi petrecut depanând codul deja implementat.
Nu trebuie să obțineți o acoperire de 100% a testelor, dar asigurați-vă că scrieți teste pentru componentele cele mai utilizate și cele mai importante.
