Kirjoituskokeet voivat olla ikäviä ja toistuvia. Saatat tuntea, että hukkaat arvokasta aikaa, jonka käyttäisit mieluummin ominaisuuksien parissa. Jos kuitenkin haluat lähettää sovelluksia, joihin luotat, sinun tulee kirjoittaa testejä.

Testauksen avulla voit havaita virheet ja bugit, jotka saatat muuten joutua toimittamaan käyttäjille. Siksi se parantaa sovelluksesi käyttökokemusta ja säästää tuotantokoodin virheenkorjaustarpeelta.

Voit helposti kirjoittaa testejä Reactissa Jestin ja React Testing Libraryn avulla.

Mitä sinun pitäisi testata Reactissa?

Testattavan kohteen päättäminen voi olla vaikeaa. Vaikka testit ovat mahtavia, sinun ei pitäisi testata jokaista React-sovelluksesi riviä. Näin tekemällä saat hauraita testejä, jotka rikkoutuvat pienimmälläkin muutoksella sovelluksessasi.

Sen sijaan sinun tulee testata vain loppukäyttäjän toteutusta. Tämä tarkoittaa, että testaat, kuinka loppukäyttäjä käyttää sovellustasi, sen sijaan, että testaisit sovelluksesi sisäistä toimintaa.

Varmista lisäksi, että testaat sovelluksesi eniten käytettyjä komponentteja, kuten aloitussivua tai kirjautumiskomponenttia. Testaa myös sovelluksesi tärkeimmät ominaisuudet. Nämä voivat olla esimerkiksi ominaisuuksia, jotka tuovat rahaa, kuten ostoskoriominaisuus.

instagram viewer

Kun päätät, mitä testataan, yksi asia on pidettävä mielessä, ettei koskaan testata toimintoja, joita React hoitaa itse. Esimerkiksi rekvisiittajen oikeellisuuden testaamisen sijaan voit käyttää React PropTypes -sovellusta.

Painikekomponentin testaus

Muista, että sinun tulee testata vain komponentin loppukäyttäjän toteutusta, ei sen sisäistä toimintaa. Painikekomponentille tämä tarkoittaa sen varmistamista, että se hahmonnetaan kaatumatta ja näkyy oikein.

Luo uusi tiedosto src kansio nimeltä Button.js ja lisää seuraava koodi.

toimintoPainike({arvo}) {
palata (
<-painiketta>{arvo}</button>
 )
}
viedäoletuksena Painike

Button.js hyväksyy arvo-nimisen ehdotuksen ja käyttää sitä painikkeen arvona.

Ensimmäisen kokeen kirjoittaminen

A luo-reagoi-sovellus mukana tulee esiasennettuna Jest ja React Testing Library. Jest on kevyt testauskirjasto, jossa on sisäänrakennetut pilkkaamis- ja väitetoiminnot. Se toimii monen kanssa JavaScript-kehykset. React Testing Library puolestaan ​​tarjoaa toimintoja, jotka auttavat testaamaan, kuinka käyttäjät ovat vuorovaikutuksessa komponenttien kanssa.

Luo uusi tiedosto nimeltä Button.test.js src-kansiossa. Oletusarvoisesti Jest tunnistaa tiedostot, joiden pääte on .test.js testitiedostoina ja suorittaa ne automaattisesti. Toinen vaihtoehto on lisätä testitiedostosi kansioon nimeltä __testit__.

Luo ensimmäinen testi lisäämällä seuraava koodi tiedostoon Button.test.js.

tuonti { renderöi } alkaen '@testing-library/react';
tuonti Painike alkaen '../Button';
kuvaile ('Painikkeen komponentti', () => { 
 testata('Muodostaa painikekomponentin kaatumatta', () => {
 render(<Painike />);
 }); 
})

Tämä testi määrittää ensin, mistä testissä on kyse Jestin tarjoaman kuvauslohkon avulla. Tämä lohko on hyödyllinen toisiinsa liittyvien testien ryhmittelyssä. Tässä ryhmittelet Button-komponentin testit.

Kuvauslohkon sisällä on ensimmäinen testi testilohkossa. Tämä lohko hyväksyy merkkijonon, joka kuvaa mitä testin tulisi tehdä, ja takaisinsoittotoiminnon, joka suorittaa odotuksen.

Tässä esimerkissä testin tulee tehdä Button-komponentti kaatumatta. React Testing Libraryn renderöintimenetelmä suorittaa varsinaisen testin. Se tarkistaa, näkyykö Button-komponentti oikein. Jos onnistuu, testi läpäisee, muuten se epäonnistuu.

Roolien käyttäminen painikkeen löytämiseen

Joskus haluat tarkistaa, onko elementti asennettu. Näyttömenetelmässä on getByRole()-funktio, jonka avulla voit napata elementin DOM: sta.

screen.getByRole('-painiketta')

Voit sitten käyttää tarttumaasi elementtiä testeihin, kuten tarkistaaksesi, onko se dokumentissa vai onko se hahmonnettu oikein.

getByRole() on yksi monista kyselyistä, joita voit käyttää komponentin elementtien valitsemiseen. Tutustu muuntyyppisiin kyselyihin osoitteessa The React Testing Library's "Mitä kyselyä minun pitäisi käyttää" -opas. Useimmat myös muut kuin "painikkeen" roolit semanttisia HTML-elementtejä niillä on implisiittisiä rooleja, joita voit käyttää kyselyjesi suorittamiseen. Etsi rooliluettelo osoitteesta MDN-dokumentit.

Lisää seuraava testilohkoon komponenttien hahmonnusten tarkistamiseksi.

testata('Renderöi painikkeen kaatumatta', () => {
 render(<Painikkeen arvo ="Kirjaudu" />);
 odottaa (screen.getByRole('-painiketta')).toBeInTheDocument()
});

ToBeInTheDocument()-sovitin tarkistaa, onko painikeelementti olemassa asiakirjassa.

Odota painikkeen hahmontuvan oikein

Button-komponentti hyväksyy prop-arvon ja näyttää sen. Jotta se hahmontuu oikein, sen näyttämän arvon on oltava sama kuin antamasi arvo.

Luo uusi testilohko ja lisää seuraava koodi.

testata('Renderöi painikkeen oikein', () => {
 render(<Painikkeen arvo ="Kirjaudu sisään" />);
 odottaa (screen.getByRole('-painiketta')).toHaveTextContent("Kirjaudu sisään")
})

Huomaa, että sinun ei tarvitse tehdä siivouksia testien jälkeen, kun käytät React Testing Library -kirjastoa. Aiemmissa versioissa sinun on suoritettava puhdistus manuaalisesti seuraavasti:

jokaisen jälkeen (siivous)

Nyt testauskirjasto purkaa komponentit automaattisesti jokaisen renderöinnin jälkeen.

Snapshot-testien luominen

Tähän mennessä olet testannut Button-komponentin toiminnan. Kirjoita tilannekuvatestejä testataksesi, pysyykö komponentin tulos samana.

Snapshot-testit vertaavat nykyistä lähtöä komponentin tallennettuun lähtöön. Jos esimerkiksi muutat Button-komponentin tyyliä, tilannekuvatesti ilmoittaa siitä. Voit joko päivittää tilannekuvan vastaamaan muutettua komponenttia tai kumota tyylimuutokset.

Snapshot-testit ovat erittäin hyödyllisiä aina, kun haluat varmistaa, että käyttöliittymäsi ei muutu odottamatta.

Snapshot-testaus eroaa yksikkötesteistä, koska sinulla on oltava jo toimiva koodi tilannevedoksen luomiseksi.

Käytät react-test-renderer npm-paketin renderer-menetelmää. Joten suorita seuraava koodi asentaaksesi sen.

npm Asentaa reagoi-testata-renderöijä

Kirjoita tilannekuvatesti Button.test.js-tiedostoon seuraavasti:

testata('Vastaa tilannekuvaa', () => {
 const puu = renderer.create(<Painikkeen arvo ="Kirjaudu sisään" />).toJSON();
odottaa(puu).toMatchSnapshot();
})

Button-komponentille ei ole olemassa tilannekuvia, joten tämän testin suorittaminen luo tilannekuvatiedoston testitiedoston rinnalle:

Painike
└─── __testit__
│ │ Painike.testit.js
│ └─── __snapshot__
│ │ Painike.testata.js.napsahtaa
│ 
└─── Painike.js

Nyt, kun suoritat seuraavan testin, React vertaa luomaansa uutta tilannekuvaa tallennettuun.

Kirjoita testejä eniten käytetyille komponenteille

Tämä opetusohjelma opetti sinulle, kuinka voit kirjoittaa DOM- ja tilannekuvatestejä Reactissa testaamalla Button-komponenttia. Testien kirjoittaminen kaikille luomillesi komponenteille voi olla työlästä. Nämä testit säästävät kuitenkin aikaa, jonka olisit käyttänyt jo käyttöön otetun koodin virheenkorjaukseen.

Sinun ei tarvitse saavuttaa 100-prosenttista testikattavuutta, mutta varmista, että kirjoitat testejä eniten käytetyille ja tärkeimmille komponenteillesi.