Pisanje testov je lahko dolgočasno in se ponavlja. Morda se vam zdi, da izgubljate dragoceni čas, ki bi ga raje porabili za delo na funkcijah. Če pa želite pošiljati aplikacije, v katere ste prepričani, bi morali pisati teste.

Testiranje vam omogoča, da odkrijete napake in hrošče, ki bi jih sicer poslali uporabnikom. Zato izboljša uporabniško izkušnjo vaše aplikacije in vam prihrani odpravljanje napak v proizvodni kodi.

Preizkuse lahko enostavno pišete v Reactu z uporabo Jesta in React Testing Library.

Kaj bi morali preizkusiti v Reactu?

Odločitev, kaj testirati, je lahko težka. Čeprav so testi odlični, ne bi smeli testirati vsake vrstice v aplikaciji React. S tem boste imeli krhke teste, ki se zlomijo že ob najmanjši spremembi v vaši aplikaciji.

Namesto tega preizkusite le izvedbo za končnega uporabnika. To pomeni preizkušanje, kako bo končni uporabnik uporabljal vašo aplikacijo, namesto preizkušanja notranjega delovanja vaše aplikacije.

Poleg tega se prepričajte, da preizkusite najpogosteje uporabljene komponente v svoji aplikaciji, na primer ciljno stran ali komponento za prijavo. Prav tako preizkusite najpomembnejše funkcije v svoji aplikaciji. To so lahko na primer funkcije, ki prinašajo denar, kot je funkcija nakupovalnega vozička.

Ko se odločate, kaj testirati, morate upoštevati eno stvar, da nikoli ne testirate funkcionalnosti, ki jih React obravnava sam. Na primer, namesto testiranja veljavnosti rekvizitov lahko uporabite React PropTypes.

Preizkušanje komponente gumba

Ne pozabite, da bi morali preizkusiti samo izvedbo komponente za končnega uporabnika in ne njenega notranjega delovanja. Za komponento gumba to pomeni preverjanje, ali se upodablja brez zrušitev in pravilno prikazuje.

Ustvarite novo datoteko v src imenovana mapa Button.js in dodajte naslednjo kodo.

funkcijoGumb({value}) {
vrnitev (
<gumb>{value}</button>
 )
}
izvozprivzeto Gumb

Button.js sprejme prop, imenovan value, in ga uporabi kot vrednost gumba.

Pisanje prvega testa

A aplikacija create-react-app je vnaprej nameščen z Jestom in React Testing Library. Jest je lahka knjižnica za testiranje z vgrajenimi funkcijami norčevanja in trditve. Deluje z mnogimi ogrodje JavaScript. React Testing Library pa na drugi strani ponuja funkcije, ki vam pomagajo preizkusiti, kako uporabniki komunicirajo s komponentami.

Ustvari novo datoteko z imenom Button.test.js v mapi src. Jest privzeto identificira datoteke s pripono .test.js kot testne datoteke in jih samodejno zažene. Druga možnost je, da svoje preskusne datoteke dodate v mapo z imenom __testi__.

Dodajte naslednjo kodo v Button.test.js, da ustvarite prvi test.

uvoz { render } od '@testing-library/react';
uvoz Gumb od '../Gumb';
opisati ('Sestavni del gumba', () => { 
 test('Upodobi komponento gumba brez zrušitve', () => {
 render(<Gumb />);
 }); 
})

Ta preizkus najprej definira, za kaj gre pri testu z uporabo bloka opisa, ki ga je zagotovil Jest. Ta blok je uporaben za združevanje povezanih testov. Tukaj združujete teste za komponento Button.

Znotraj opisanega bloka imate prvi test v testnem bloku. Ta blok sprejme niz, ki opisuje, kaj mora narediti test, in funkcijo povratnega klica, ki izvede pričakovanje.

V tem primeru mora preskus upodobiti komponento Button brez zrušitve. Metoda upodabljanja iz knjižnice React Testing Library izvede dejanski preizkus. Preveri, ali se komponenta Button pravilno upodablja. Če se, je test uspešen, sicer pa ne.

Uporaba vlog za iskanje gumba

Včasih želite preveriti, ali je bil element nameščen. Metoda zaslona ima funkcijo getByRole(), ki jo lahko uporabite za zajemanje elementa iz DOM.

screen.getByRole('gumb')

Nato lahko uporabite element, ki ste ga zgrabili, da izvedete preizkuse, kot je preverjanje, ali obstaja v dokumentu ali je bil pravilno upodobljen.

getByRole() je ena izmed mnogih poizvedb, ki jih lahko uporabite za izbiro elementov v komponenti. Oglejte si druge vrste poizvedb v The React Testing Library Vodnik »Katero poizvedbo naj uporabim«. Tudi razen vloge "gumba", večina semantični elementi HTML imajo implicitne vloge, ki jih lahko uporabite za izvajanje svojih poizvedb. Poiščite seznam vlog iz MDN dokumenti.

V testni blok dodajte naslednje, da preverite upodobitve komponent.

test('Gumb za upodabljanje brez zrušitve', () => {
 render(<Vrednost gumba="Prijavite se" />);
 pričakuj (screen.getByRole('gumb')).toBeInTheDocument()
});

Ujemanje toBeInTheDocument() preveri, ali element gumba obstaja v dokumentu.

Pričakujte, da se bo gumb pravilno upodobil

Komponenta Button sprejme vrednost prop in jo prikaže. Za pravilno upodobitev mora biti vrednost, ki jo prikaže, enaka tisti, ki ste jo posredovali.

Ustvarite nov testni blok in dodajte naslednjo kodo.

test('Pravilno upodablja gumb', () => {
 render(<Vrednost gumba="Vpiši se" />);
 pričakuj (screen.getByRole('gumb')).toHaveTextContent("Vpiši se")
})

Upoštevajte, da vam pri uporabi knjižnice React Testing Library po preizkusih ni treba izvajati čiščenj. V prejšnjih različicah bi morali ročno izvesti čiščenje tako:

afterEach (čiščenje)

Zdaj knjižnica za testiranje samodejno odklopi komponente po vsakem upodabljanju.

Ustvarjanje testov posnetkov

Doslej ste preizkusili delovanje komponente Button. Napišite teste posnetkov, da preverite, ali izhod komponente ostaja enak.

Preizkusi posnetkov primerjajo trenutni izhod s shranjenim izhodom komponente. Če na primer spremenite slog komponente gumba, vas bo preskus posnetka obvestil. Posodobite lahko posnetek, da se bo ujemal s spremenjeno komponento, ali razveljavite spremembe sloga.

Preizkusi posnetkov so zelo uporabni, kadar koli želite zagotoviti, da se vaš uporabniški vmesnik ne bo nepričakovano spremenil.

Testiranje posnetkov se razlikuje od testov enot, saj morate imeti že delujočo kodo, da ustvarite posnetek.

Uporabili boste metodo upodabljalnika iz paketa npm react-test-renderer. Torej, izvedite naslednjo kodo, da jo namestite.

npm namestite reagirati-test- upodabljalnik

V Button.test.js napišite preskus posnetka, kot sledi:

test('Ujema se s posnetkom', () => {
 const tree = renderer.create(<Vrednost gumba="Vpiši se" />).toJSON();
pričakovati(drevo).toMatchSnapshot();
})

Ni obstoječih posnetkov za komponento Button, zato bo izvajanje tega preizkusa ustvarilo datoteko posnetka poleg preskusne datoteke:

Gumb
└─── __testi__
│ │ Gumb.testi.js
│ └─── __posnetek__
│ │ Gumb.test.js.snap
│ 
└─── Gumb.js

Zdaj, ko zaženete naslednji test, bo React primerjal nov posnetek, ki ga ustvari, s shranjenim.

Napišite teste za najbolj uporabljene komponente

Ta vadnica vas je naučila, kako napisati teste DOM in posnetke v React s testiranjem komponente Button. Pisanje testov za vse komponente, ki jih ustvarite, je lahko dolgočasno. Vendar vam ti preizkusi prihranijo čas, ki bi ga porabili za odpravljanje napak v že uvedeni kodi.

Ni vam treba doseči 100-odstotne pokritosti s testi, vendar zagotovite, da pišete teste za svoje najpogosteje uporabljene in najpomembnejše komponente.