Rašymo testai gali būti nuobodūs ir pasikartojantys. Gali atrodyti, kad švaistote brangų laiką, kurį mieliau naudotumėte funkcijoms dirbti. Tačiau jei norite siųsti programas, kuriomis esate įsitikinę, turėtumėte rašyti testus.
Testavimas leidžia aptikti klaidas ir klaidas, kurias kitu atveju galėtumėte išsiųsti vartotojams. Todėl tai pagerina jūsų programos vartotojo patirtį ir neleidžia derinti gamybos kodo.
Galite lengvai rašyti testus „React“ naudodami „Jest“ ir „React Testing Library“.
Ką turėtumėte išbandyti „React“?
Gali būti sunku nuspręsti, ką išbandyti. Nors testai yra puikūs, neturėtumėte tikrinti kiekvienos „React“ programos eilutės. Tai atlikus, jums liks trapūs bandymai, kurie nutrūks dėl menkiausio programos pakeitimo.
Vietoj to turėtumėte išbandyti tik galutinio vartotojo įgyvendinimą. Tai reiškia, kad reikia išbandyti, kaip galutinis vartotojas naudos jūsų programą, o ne išbandyti vidinį programos veikimą.
Be to, įsitikinkite, kad išbandote dažniausiai naudojamus programos komponentus, pvz., nukreipimo puslapį arba prisijungimo komponentą. Taip pat išbandykite svarbiausias programos funkcijas. Pavyzdžiui, tai gali būti pinigų atnešančios funkcijos, pvz., pirkinių krepšelio funkcija.
Sprendžiant, ką išbandyti, reikia nepamiršti vieno dalyko – niekada netikrinti funkcijų, kurias „React“ tvarko pati. Pavyzdžiui, užuot tikrinę rekvizitų galiojimą, galite naudoti React PropTypes.
Mygtuko komponento testavimas
Atminkite, kad turėtumėte išbandyti tik galutinio vartotojo komponento įgyvendinimą, o ne jo vidinį veikimą. Mygtuko komponento atveju tai reiškia, kad reikia patikrinti, ar jis atvaizduojamas nesustrigdamas ir tinkamai rodomas.
Sukurkite naują failą src aplankas vadinamas Button.js ir pridėkite šį kodą.
funkcijaMygtukas({value}) {
grąžinti (
<mygtuką>{value}</button>
)
}
eksportuotinumatytas Mygtukas
Button.js priima rekvizitą, vadinamą verte, ir naudoja jį kaip mygtuko vertę.
Pirmojo testo rašymas
A kurti-reaguoti-programėlę yra iš anksto įdiegta su „Jest“ ir „React Testing Library“. „Jest“ yra lengva testavimo biblioteka su įmontuotomis tyčiojimosi ir tvirtinimo funkcijomis. Tai veikia su daugeliu JavaScript karkasai. Kita vertus, „React Testing Library“ teikia funkcijas, padedančias patikrinti, kaip vartotojai sąveikauja su komponentais.
Sukurkite naują failą pavadinimu Button.test.js src aplanke. Pagal numatytuosius nustatymus Jest identifikuoja failus su priesaga .test.js kaip bandomuosius failus ir automatiškai juos paleidžia. Kita galimybė yra pridėti bandomuosius failus į aplanką, pavadintą __testai__.
Pridėkite šį kodą prie Button.test.js, kad sukurtumėte pirmąjį testą.
importuoti { pateikti } iš „@testing-library/react“;
importuoti Mygtukas iš „../mygtukas“;
apibūdinti('Mygtuko komponentas', () => {
testas ('Pateikiamas mygtuko komponentas nesuduždamas', () => {
render (<Mygtukas />);
});
})
Šis testas pirmiausia apibrėžia, kas yra testas, naudojant Jest pateiktą aprašo bloką. Šis blokas naudingas sugrupuojant susijusius testus. Čia grupuojate mygtuko komponento testus.
Aprašymo bloko viduje turite pirmąjį testą bandymo bloke. Šis blokas priima eilutę, aprašančią, ką testas turėtų atlikti, ir atgalinio skambinimo funkciją, kuri vykdo lūkesčius.
Šiame pavyzdyje bandymas turėtų pateikti mygtuko komponentą be strigimo. Atvaizdavimo metodas iš „React Testing Library“ atlieka tikrąjį testą. Ji patikrina, ar mygtuko komponentas atvaizduojamas teisingai. Jei taip, testas išlaikytas, kitu atveju nepavyks.
Vaidmenų naudojimas ieškant mygtuko
Kartais norisi patikrinti, ar elementas buvo sumontuotas. Ekrano metodas turi funkciją getByRole(), kurią galite naudoti norėdami patraukti elementą iš DOM.
screen.getByRole('mygtuką')
Tada galite naudoti elementą, kurį sugriebėte, norėdami atlikti testus, pvz., patikrinti, ar jis yra dokumente, ar buvo tinkamai pateiktas.
getByRole() yra viena iš daugelio užklausų, kurias galite naudoti norėdami pasirinkti komponento elementus. Peržiūrėkite kitų tipų užklausas Reagavimo testavimo biblioteka Vadovas „Kokią užklausą turėčiau naudoti“. Taip pat dauguma, išskyrus „mygtuko“ vaidmenį semantiniai HTML elementai turi numanomus vaidmenis, kuriuos galite naudoti vykdydami savo užklausas. Raskite vaidmenų sąrašą iš MDN dokumentai.
Norėdami patikrinti komponentų atvaizdavimą, į testavimo bloką pridėkite toliau pateiktą informaciją.
testas ('Atvaizduojamas mygtukas nesuduždamas', () => {
render (<Mygtuko vertė ="Registruotis" />);
tikėtis (screen.getByRole('mygtuką')).ToBeInTheDocument()
});
ToBeInTheDocument() atitikmuo patikrina, ar dokumente yra mygtuko elementas.
Tikėtis, kad mygtukas bus rodomas teisingai
Komponentas Mygtukas priima rekvizito reikšmę ir ją parodo. Kad jis būtų pateiktas teisingai, rodoma reikšmė turi būti tokia pati, kokią perdavėte.
Sukurkite naują bandymo bloką ir pridėkite šį kodą.
testas ('Mygtukas atvaizduojamas teisingai', () => {
render (<Mygtuko vertė ="Prisijungti" />);
tikėtis (screen.getByRole('mygtuką')).TurėtiTextContent("Prisijungti")
})
Atminkite, kad jums nereikia atlikti valymo po bandymų, kai naudojate „React Testing Library“. Ankstesnėse versijose valymą turėsite atlikti rankiniu būdu taip:
po kiekvieno (valymas)
Dabar testavimo biblioteka automatiškai atjungia komponentus po kiekvieno pateikimo.
Momentinių nuotraukų testų kūrimas
Iki šiol išbandėte mygtuko komponento veikimą. Parašykite momentinių nuotraukų testus, kad patikrintumėte, ar komponento išvestis išlieka tokia pati.
Momentinio vaizdo testai lygina dabartinę išvestį su saugoma komponento išvestimi. Pavyzdžiui, jei pakeisite mygtuko komponento stilių, momentinės nuotraukos testas jums apie tai praneš. Galite atnaujinti momentinę nuotrauką, kad ji atitiktų pakeistą komponentą, arba anuliuoti stiliaus pakeitimus.
Momentinių nuotraukų testai yra labai naudingi, kai norite užtikrinti, kad jūsų vartotojo sąsaja netikėtai nepasikeistų.
Momentinės nuotraukos testavimas skiriasi nuo vienetų testų, nes norint sukurti momentinį vaizdą reikia turėti jau veikiantį kodą.
Naudosite atvaizdavimo metodą iš paketo react-test-renderer npm. Taigi, paleiskite šį kodą, kad jį įdiegtumėte.
npm diegti reaguoti -bandymas- perteikėjas
Button.test.js parašykite momentinės nuotraukos testą taip:
testas ('Atitinka momentinę nuotrauką', () => {
const medis = renderer.create(<Mygtuko vertė ="Prisijungti" />).toJSON();
tikėtis(medis).toMatchSnapshot();
})
Nėra mygtuko komponento momentinių nuotraukų, todėl atliekant šį testą, kartu su bandomuoju failu bus sukurtas momentinės nuotraukos failas:
Mygtukas
└─── __testai__
│ │ Mygtukas.testai.js
│ └─── __momentinė nuotrauka__
│ │ Mygtukas.testas.js.spragtelėjau
│
└─── Mygtukas.js
Dabar, kai vykdysite kitą testą, „React“ palygins naują sugeneruotą momentinę nuotrauką su išsaugota.
Rašykite dažniausiai naudojamų komponentų testus
Šioje pamokoje buvo išmokyta, kaip parašyti DOM ir momentinių nuotraukų testus programoje „React“, išbandant mygtuko komponentą. Visų sukurtų komponentų testų rašymas gali būti nuobodus. Tačiau šie testai sutaupo laiko, kurį sugaištumėte derindami jau įdiegtą kodą.
Nereikia pasiekti 100 procentų bandymo aprėpties, bet įsitikinkite, kad rašote dažniausiai naudojamų ir svarbiausių komponentų testus.
