Testide kirjutamine võib olla tüütu ja korduv. Teile võib tunduda, et raiskate väärtuslikku aega, mida eelistaksite funktsioonide kallal töötamiseks. Kui aga soovite saata rakendusi, milles olete kindel, peaksite kirjutama teste.
Testimine võimaldab teil tuvastada vigu ja vigu, mida muidu kasutajatele saata võiksite. Seetõttu parandab see teie rakenduse kasutuskogemust ja säästab teid tootmiskoodi silumisest.
Saate hõlpsasti kirjutada teste rakenduses React, kasutades Jest ja React Testing Library.
Mida peaksite reaktsioonis testima?
Otsustamine, mida testida, võib olla keeruline. Kuigi testid on suurepärased, ei tohiks te oma Reacti rakenduse iga rida testida. See jätab teile haprad testid, mis katkevad teie rakenduse vähimategi muudatustega.
Selle asemel peaksite testima ainult lõppkasutaja rakendust. See tähendab selle asemel, et testida, kuidas lõppkasutaja teie rakendust kasutab, selle asemel et testida teie rakenduse sisemist tööd.
Lisaks veenduge, et testite oma rakenduses enim kasutatud komponente, nagu sihtleht või sisselogimiskomponent. Samuti testige oma rakenduse kõige olulisemaid funktsioone. Näiteks võivad need olla raha toovad funktsioonid, näiteks ostukorvi funktsioon.
Kui otsustate, mida testida, tuleb meeles pidada, et mitte kunagi testida funktsioone, millega React ise hakkama saab. Näiteks rekvisiitide kehtivuse testimise asemel võite kasutada React PropTypes.
Nupu komponendi testimine
Pidage meeles, et peaksite testima ainult komponendi lõppkasutaja rakendust, mitte selle sisemist tööd. Nupukomponendi puhul tähendab see kontrollimist, et see renderdub ilma kokkujooksmiseta ja kuvatakse õigesti.
Looge kaustas uus fail src kaust kutsutud Button.js ja lisage järgmine kood.
funktsiooniNupp({value}) {
tagasi (
<nuppu>{value}</button>
)
}
eksportidavaikimisi Nupp
Button.js aktsepteerib rekvisiidi nimega väärtus ja kasutab seda nupu väärtusena.
Esimese testi kirjutamine
A Rakenduse loomine-reageerimine kaasas on Jest ja React Testing Library eelinstallitud. Jest on kerge testimisteek, millel on sisseehitatud pilkamis- ja kinnitusfunktsioonid. See töötab paljudega JavaScripti raamistikud. React Testing Library seevastu pakub funktsioone, mis aitavad teil testida, kuidas kasutajad komponentidega suhtlevad.
Looge uus fail nimega Button.test.js src kaustas. Vaikimisi tuvastab Jest failid, mille järelliide on .test.js testfailidena ja käivitab need automaatselt. Teine võimalus on lisada oma testfailid kausta nimega __testid__.
Esimese testi loomiseks lisage faili Button.test.js järgmine kood.
importida { renderda } alates '@testing-library/react';
importida Nupp alates '../nupp';
kirjelda ('Nupu komponent', () => {
test('Renderdab nupu komponendi ilma krahhita', () => {
render (<Nupp />);
});
})
See test määratleb kõigepealt, mida test endast kujutab, kasutades Jesti pakutavat kirjeldavat plokki. See plokk on kasulik seotud testide rühmitamiseks. Siin rühmitate nupukomponendi testid.
Kirjeldusploki sees on teil testploki esimene test. See plokk aktsepteerib stringi, mis kirjeldab, mida test peaks tegema, ja tagasihelistamisfunktsiooni, mis täidab ootuse.
Selles näites peaks test renderdama nupu komponendi ilma krahhita. Tegeliku testi teostab React Testing Library renderdamismeetod. See kontrollib, kas nupu komponent renderdatakse õigesti. Kui see õnnestub, läheb test läbi, vastasel juhul ebaõnnestub.
Rollide kasutamine nupu leidmiseks
Mõnikord soovite kontrollida, kas element on paigaldatud. Ekraanimeetodil on funktsioon getByRole(), mida saate kasutada DOM-ist elemendi haaramiseks.
screen.getByRole('nuppu')
Seejärel saate haaratud elementi kasutada testide tegemiseks, näiteks kontrollimiseks, kas see on dokumendis olemas või kas see on õigesti renderdatud.
getByRole() on üks paljudest päringutest, mida saate kasutada komponendi elementide valimiseks. Vaadake muud tüüpi päringuid saidil The Reaktsiooni testimise raamatukogu Juhend "Millist päringut peaksin kasutama". Ka enamik peale “nupu” rolli semantilised HTML-elemendid neil on kaudsed rollid, mida saate oma päringute sooritamiseks kasutada. Otsige üles rollide loend aadressilt MDN-i dokumendid.
Komponentide renderduste kontrollimiseks lisage testplokile järgmine.
test('Renderdab nupp ilma kokkujooksmiseta', () => {
render (<Nupu väärtus ="Registreeri" />);
oodata (screen.getByRole('nuppu')).ToBeInTheDocument()
});
ToBeInTheDocument() sobitaja kontrollib, kas nupuelement on dokumendis olemas.
Oodake, et nupp renderdaks õigesti
Komponent Button aktsepteerib prop väärtuse ja kuvab selle. Selle õigeks renderdamiseks peab selle kuvatav väärtus olema sama, mis sisestasite.
Looge uus testplokk ja lisage järgmine kood.
test('Renderdab nupp õigesti', () => {
render (<Nupu väärtus ="Logi sisse" />);
oodata (screen.getByRole('nuppu')).toHaveTextContent("Logi sisse")
})
Pange tähele, et React Testing Library kasutamisel ei pea te pärast teste puhastama. Varasemates versioonides peate puhastamise käsitsi tegema järgmiselt:
pärast iga (puhastus)
Nüüd eemaldab testimise teek komponendid automaatselt pärast iga renderdamist.
Snapshot testide loomine
Seni olete testinud nupu komponendi käitumist. Kirjutage hetktõmmiste testid, et kontrollida, kas komponendi väljund jääb samaks.
Snapshot testid võrdlevad praegust väljundit komponendi salvestatud väljundiga. Näiteks kui muudate nupu komponendi stiili, teavitab teid hetketõmmise test. Saate hetktõmmist värskendada, et see vastaks muudetud komponendile, või stiilimuudatused tagasi võtta.
Snapshot testid on väga kasulikud alati, kui soovite tagada, et teie kasutajaliides ei muutuks ootamatult.
Hetketõmmise testimine erineb ühikutestidest, kuna hetktõmmise loomiseks peab teil olema juba töötav kood.
Kasutate renderdamismeetodit paketist react-test-renderer npm. Niisiis, käivitage selle installimiseks järgmine kood.
npm installida reageerima-katsetada- renderdaja
Kirjutage faili Button.test.js hetktõmmise test järgmiselt:
test('Sobib hetkepildiga', () => {
const puu = renderer.create(<Nupu väärtus ="Logi sisse" />).toJSON();
oodata(puu).toMatchSnapshot();
})
Nupu komponendi jaoks pole hetktõmmiseid, nii et selle testi käivitamine loob testfaili kõrvale hetktõmmise:
Nupp
└─── __testid__
│ │ Nupp.testid.js
│ └─── __hetktõmmis__
│ │ Nupp.test.js.klõps
│
└─── Nupp.js
Nüüd, kui käivitate järgmise testi, võrdleb React oma loodud uut hetktõmmist salvestatud pildiga.
Kirjutage enim kasutatud komponentide teste
See õpetus õpetas teile, kuidas nupukomponenti testides Reactis DOM-i ja hetktõmmiste teste kirjutada. Kõigi loodud komponentide testide kirjutamine võib olla tüütu. Need testid säästavad aga aega, mille oleksite kulutanud juba juurutatud koodi silumisele.
Te ei pea saavutama 100-protsendilist testide katvust, kuid veenduge, et kirjutate testid oma enimkasutatud ja kõige olulisemate komponentide jaoks.