Pisanje testova može biti zamorno i ponavljati se. Možda ćete se osjećati kao da gubite dragocjeno vrijeme koje biste radije iskoristili za rad na značajkama. Međutim, ako želite slati aplikacije u koje ste sigurni, trebali biste pisati testove.
Testiranje vam omogućuje da uhvatite pogreške i bugove koje biste inače mogli poslati korisnicima. Stoga poboljšava korisničko iskustvo vaše aplikacije i štedi vas potrebe za otklanjanjem pogrešaka proizvodnog koda.
Možete jednostavno pisati testove u Reactu koristeći Jest i React Testing Library.
Što biste trebali testirati u Reactu?
Odlučiti što testirati može biti teško. Iako su testovi izvrsni, ne biste trebali testirati svaki redak u svojoj React aplikaciji. Na taj ćete način imati krhke testove koji se pokvare i pri najmanjoj promjeni u vašoj aplikaciji.
Umjesto toga, trebali biste testirati samo implementaciju krajnjeg korisnika. To znači testiranje načina na koji će krajnji korisnik koristiti vašu aplikaciju umjesto testiranja unutarnjeg funkcioniranja vaše aplikacije.
Nadalje, provjerite jeste li testirali najčešće korištene komponente u svojoj aplikaciji, poput odredišne stranice ili komponente za prijavu. Također testirajte najvažnije značajke u svojoj aplikaciji. Na primjer, to mogu biti značajke koje donose novac, poput značajke košarice za kupnju.
Kada odlučujete što testirati, jednu stvar koju morate imati na umu je da nikada ne testirate funkcionalnost koju React sam obrađuje. Na primjer, umjesto testiranja valjanosti rekvizita, možete koristiti React PropTypes.
Testiranje komponente gumba
Upamtite, trebali biste testirati samo implementaciju komponente za krajnjeg korisnika, a ne njezin interni rad. Za komponentu gumba to znači provjeru renderiranja bez rušenja i ispravnog prikaza.
Stvorite novu datoteku u src folder tzv Button.js i dodajte sljedeći kod.
funkcijaDugme({vrijednost}) {
povratak (
<dugme>{vrijednost}</button>
)
}
izvozzadano Dugme
Button.js prihvaća prop pod nazivom value i koristi ga kao vrijednost gumba.
Pisanje vašeg prvog testa
A create-react-app aplikacija dolazi unaprijed instaliran s Jestom i React Testing Library. Jest je lagana biblioteka za testiranje s ugrađenim funkcijama ismijavanja i tvrdnje. Djeluje s mnogima JavaScript okviri. React Testing Library, s druge strane, pruža funkcije koje vam pomažu testirati kako korisnici stupaju u interakciju s komponentama.
Napravite novu datoteku pod nazivom Button.test.js u mapi src. Prema zadanim postavkama, Jest identificira datoteke sa sufiksom .test.js kao testne datoteke i automatski ih pokreće. Druga je mogućnost dodati testne datoteke u mapu pod nazivom __testovi__.
Dodajte sljedeći kod u Button.test.js za izradu prvog testa.
uvoz { render } iz '@testing-library/react';
uvoz Dugme iz '../Dugme';
opisati('Komponenta gumba', () => {
test('Renderira komponentu gumba bez rušenja', () => {
prikazati (<Dugme />);
});
})
Ovaj test prvo definira o čemu se radi korištenjem bloka opisa koji osigurava Jest. Ovaj blok je koristan za grupiranje povezanih testova. Ovdje grupirate testove za komponentu Button.
Unutar bloka za opis imate prvi test u bloku za testiranje. Ovaj blok prihvaća niz koji opisuje što test treba učiniti i funkciju povratnog poziva koja izvršava očekivanje.
U ovom primjeru, test bi trebao prikazati komponentu Button bez rušenja. Metoda renderiranja iz React Testing Library izvodi stvarni test. Provjerava prikazuje li se komponenta Gumb ispravno. Ako jest, test prolazi, u suprotnom ne uspijeva.
Korištenje uloga za pronalaženje gumba
Ponekad želite provjeriti je li element montiran. Metoda zaslona ima funkciju getByRole() koju možete koristiti za preuzimanje elementa iz DOM-a.
screen.getByRole('dugme')
Zatim možete upotrijebiti element koji ste zgrabili za izvođenje testova poput provjere postoji li u dokumentu ili je ispravno prikazan.
getByRole() jedan je od mnogih upita koje možete koristiti za odabir elemenata u komponenti. Pogledajte druge vrste upita u The React Testing Library’s Vodič "Koji upit trebam koristiti". Također osim uloge "gumba", većina semantički HTML elementi imaju implicitne uloge koje možete koristiti za izvođenje svojih upita. Pronađite popis uloga iz MDN dokumenti.
Dodajte sljedeće testnom bloku da provjerite renderiranje komponente.
test('Gumb za renderiranje bez rušenja', () => {
prikazati (<Vrijednost gumba="Prijavite se" />);
očekuj (screen.getByRole('dugme')).toBeInTheDocument()
});
Podudarnost toBeInTheDocument() provjerava postoji li element gumba u dokumentu.
Očekujte da će se gumb ispravno prikazati
Komponenta Button prihvaća vrijednost rekvizita i prikazuje je. Da bi se ispravno prikazao, vrijednost koju prikazuje mora biti ista kao ona koju ste unijeli.
Napravite novi testni blok i dodajte sljedeći kod.
test('Ispravno prikazuje gumb', () => {
prikazati (<Vrijednost gumba="Prijaviti se" />);
očekuj (screen.getByRole('dugme')).toHaveTextContent("Prijaviti se")
})
Imajte na umu da ne morate raditi čišćenja nakon testova kada koristite React Testing Library. U prošlim verzijama morali biste ručno izvršiti čišćenje ovako:
afterEach (čišćenje)
Sada biblioteka za testiranje automatski demontira komponente nakon svakog renderiranja.
Stvaranje Snapshot testova
Do sada ste testirali ponašanje komponente Button. Napišite testove snimki kako biste testirali ostaje li izlaz komponente isti.
Snapshot testovi uspoređuju trenutni izlaz s pohranjenim izlazom komponente. Na primjer, ako promijenite stil komponente Button, test snimke će vas obavijestiti. Možete ažurirati snimku kako bi odgovarala promijenjenoj komponenti ili poništiti promjene stila.
Testovi snimki vrlo su korisni kad god želite osigurati da se vaše korisničko sučelje neočekivano ne promijeni.
Testiranje snimke razlikuje se od jediničnih testova jer morate imati već funkcionalni kod za izradu snimke.
Koristit ćete metodu renderera iz npm paketa react-test-renderer. Dakle, izvršite sljedeći kod da biste ga instalirali.
npm instalirati reagirati-test-renderer
U Button.test.js napišite test snimke na sljedeći način:
test('Odgovara snimci', () => {
const stablo = renderer.create(<Vrijednost gumba="Prijaviti se" />).toJSON();
očekivati(drvo).toMatchSnapshot();
})
Nema postojećih snimaka za komponentu Gumb, pa će pokretanje ovog testa stvoriti datoteku snimke uz testnu datoteku:
Dugme
└─── __testovi__
│ │ Dugme.ispitivanja.js
│ └─── __snimak__
│ │ Dugme.test.js.pucnuti
│
└─── Dugme.js
Sada, kada pokrenete sljedeći test, React će usporediti novu snimku koju generira s pohranjenom.
Napišite testove za najčešće korištene komponente
Ovaj vodič vas je naučio kako napisati DOM i testove snimki u Reactu testiranjem komponente Button. Pisanje testova za sve komponente koje izradite može biti zamorno. Međutim, ovi vam testovi štede vrijeme koje biste potrošili na otklanjanje pogrešaka već implementiranog koda.
Ne morate postići 100-postotnu pokrivenost testom, ali osigurajte da pišete testove za svoje najčešće korištene i najvažnije komponente.
