Jos haluat tietää, miten testata reagoi, olet oikeassa paikassa. Tiedätkö todella koodisi, mitä sen pitäisi tehdä? Oletko testannut sen selaimessa? Entä jos et ole tai et voi testata kaikkea, ja se rikkoo tuotannossa?
Testauskirjasto on ryhmä apuohjelmien kehittäjät käyttävät kirjoittamaan yksittäisiä testejä sovelluskomponenteista. Osa testin periaatteista ovat:
Kuvaus:
kuvaa mitä testi on
Käytä / render:
käyttää komponenttia ympäristössä, jossa sitä voidaan testata
Pilkkaaminen:
Luo teeskennellä toimintoja, jotta voit tarkistaa olettamuksesi
Tämän artikkelin aikana aion tutkia joitakin esimerkkejä reagoivasta testauskirjastosta, jotta voit aloittaa tämän arvokkaan tavan parantaa koodin lähdön voimakkuutta sekä varmistaa koodisi ei heitä kaikki ilkeä yllätys, kun se menee tuotantoon.
Haluatko enemmän hyödyllisiä resursseja? Tässä on paras
Web-suunnittelutyökalut
noin se auttaa sinua tekemään älykkäämpiä. Tai jos tarvitset uutta konetta, kokeile tätä kierroksen
Parhaat kannettavat ohjelmointi
. Tai jos rakennat uuden sivuston, saatat tarvita suurta
Verkkosivuston rakentaja
.
01. Aloita reagoida testauskirjasto
Aion käyttää luoda reagoivaa sovellusta tähän demoon, koska se on jo esitetty testauskirjastolla. Jos käytät Gatsbyn tai mukautettua asennusta, sinun on oltava jonkin verran kokoonpanoa, ennen kuin aloitat testauskirjaston käytön.
Aloita, luokaamme uusi sovellus. Jos sinulla on jo äskettäinen solmu.js-versio, voit suorittaa seuraavan komennon asentamatta mitään muuta maailmanlaajuisesti:
npx create-react-app netmag-javascript-testing
02. Päätä, mitä testata
Kuvittele, että meillä on yksinkertainen komponentti, sano painike jonkin valtion kanssa. Mitkä ovat joitakin asioita, jotka tarvitsevat testata tällaisen komponentin?
●
Komponentin ulkonäkö:
Emme halua mitään muuttuu odottamatta sen jälkeen, kun olemme kirjoittaneet komponenttisi. Joten aiomme kirjoittaa tilannekuvan testin kaapata miten se tekee. Sitten, jos jotain muutoksia, näemme sen nopeasti ilman manuaalista tai visuaalista testiä. Tämä on hienoa komponenteille, jotka koostuvat monista pienemmistä osista: näet nopeasti, milloin (ja missä) sen ulkonäkö on vaikuttanut.
●
Eri haarat, jotka tekevät:
Koska meillä voisi olla kaksi tai useampia erilaisia tuotoksia, meidän on testattava, se tekee kaikki ne oikein, ei vain yksi niistä. Joten meidän on simuloida napsautustapahtumaa ja sinulla on toinen tilannekuvan testi siitä, miten se tekee tämän koodin haaran jälkeen.
●
Tämä toimintoja kutsutaan odotetulla tavalla:
Haluamme varmistaa, että koodi, jonka kirjoitimme toisen toiminnon, toimii, kun oletetaan, että se tulee. Mutta koska tämä toiminto on ulkoinen riippuvuus, emme halua testata sitä täällä. Testimme on kapseltava vain toiminnallisuutta, jota haluamme niitä.
Kirjoitamme ensimmäisen testin. Luo uusi tiedosto nimeltä
Mycomponent.Unit.test.js
samassa kansiossa kuin komponentti. Lisäämällä test.js lopussa testauskirjasto automaattisesti valitaan automaattisesti. Tämän tiedoston sisältö on alla:
Tuonti reagoi "reagoi"
Tuo {RENDEND} alkaen "@ testauskirjasto / reagoi"
Tuo mycomponent "./mycomponent"
Kuvaile ("& lt; mycomponent / & gt;", () = & gt; {
// Testit menevät tänne
})
Ensimmäinen asia, jonka haluan kiinnittää huomionne on
Kuvaile ()
Toiminto, joka kestää kaksi argumenttia: ensimmäinen on merkkijono, jota voit käyttää paremmin - tekstin merkkijonona - mitä testi tulee tekemään. Meidän tapauksessamme olemme yksinkertaisesti sanoneet, että sen pitäisi tehdä. Tämä on erittäin hyödyllinen, kun joku muu tarkastelee koodiasi tai sinun on muistettava, mitä teit myöhemmässä vaiheessa. Hyvien kuvausten kirjoittaminen Ilmoitus on koodin dokumentaatio ja toinen hyvä syy kirjoittamiseen testeihin.
Toinen argumentti on testit. The
Kuvaile ()
Toiminto toimii kaikki nämä testit peräkkäin.
04. Käytä Cleanup-toimintoa
Esitämme käyttöön avustajan toiminto
Reach ()
. Meidän on käytettävä tätä, koska joka kerta, kun teemme jotain komponentin kanssa, haluamme tuoreen kopion ilman aiemmin, jotka olemme aiemmin antaneet, että se oli edelleen olemassa osalla. Tai meidän on ehkä tehtävä uudelleen komponentti:
Reach ()
Tekee se meille ja voimme siirtää sen puhdistustoiminnon.
Tuo {RENDEND, CLEANUP} alkaen "@ testauskirjasto / reagoi"
...
Kuvaile ("komponentin pitäisi tehdä", () = & gt; {
Etsitetään (puhdistus)
}
Tämä render antaa meille pääsyn kaikkiin kootun komponentin renderoiduista ominaisuuksista. Se voi olla hyvä pudottaa tämä a
Console.log ()
Joten näet enemmän selvästi, mitä se tekee.
Jos teet, näet, että meillä on muutamia hyödyllisiä ominaisuuksia, joita voimme hyödyntää täältä. Aion tehdä väitteen (tehdä testattava ilmoitus) ja testaa se purkamalla säiliö. Säiliö 'Sisältää komponenttiin liittyvät Dom-solmut (kaikki HTML).
Nyt meillä on pääsy konttiin, miten voin kertoa, että se on tehty väitteeni mukaan? Lisäämällä tilannekuvan testi.
Ajattele tilannekuvaa kuin valokuva. Se ottaa tilannekuvan komponenttista tiettyyn ajankohtana. Sitten aina, kun teemme muutoksia koodiin, voimme nähdä, mikä vastaa yhä alkuperäistä tilannekuvaa. Jos näin on, voimme olla varma, että komponentissa ei ole muuttunut mikään. Jos näin ei kuitenkaan voi olla paljastanut toisesta komponentista peräisin olevan ongelman, joista emme ehkä ole havaittavissa aiemmin:
06. Testausominaisuudet
Komponentin rekvisiitta tai ominaisuudet voidaan testata myös tilannekuvilla. Komponenttisi tarjoamasi erilaisten rekvisijoitusten testaaminen antaa sinulle suuremman kattavuuden ja luottamuksen. Et koskaan tiedä, milloin vaatimus tarkoittaa komponenttisi rekvisiitta, ja lopullinen tuotanto muuttuu.
Määritämme objektin ominaisuudet ja käytät sitten levitysoperaattoria (kolme pistettä, jota seuraa kohteen nimi:
... LightProperties)
Koska voimme vain siirtää yhden argumentin, kun teemme tällä tavalla. On myös hyödyllistä nähdä, mitkä ominaisuudet kulkevat erikseen:
Se ("perustaa peruskorjaus", () = & gt; {
const {kontti} = render (& lt; mycomponent / & gt;
)
Odottaa (kontti) .ToMatchsnapshot ()
}))
se ("valaisee valon version rekvisiitta", () = & gt; {
const {kontti} = render (
& lt; Mycomponent {... LightProperties} / & gt;
)
Odottaa (kontti) .ToMatchsnapshot ()
}))
07. Testaa muutokset UI: ssa
Kuvittele, että komponenttisi on painike ja haluat varmistaa, että jotain tapahtuu, kun painiketta napsautetaan. Saatat ajatella, että haluat testata sovelluksen tilaa; Esimerkiksi voit houkutella testata, että valtio on päivittänyt. Tämä ei kuitenkaan ole näiden testien kohde.
Tämä tuo meidät tärkeään käsitteeseen testauskirjaston käyttämisessä: Emme täällä testata tilaa tai tavassamme toimii. Olemme täällä testata, miten ihmiset käyttävät komponenttia ja että se täyttää heidän odotuksensa.
Joten onko valtio päivittänyt vai ei, on merkityksetön; Haluamme testata, mitä tämän painikkeen tulos on.
Katsotaanpa, että testaamme toiminnon tulokset, jotka muuttavat UI: n pimeästä tilasta valotilaan. Tässä on osa:
Tämä on hienoa: meidän ei tarvitse manuaalisesti mennä sivustoon ja katsoa ympärillesi, sitten napsauttamalla painiketta ja katso ympäri toista kertaa - jonka aikana voit myöntää, unohdat tai kaipaat jotain! Nyt voimme luottaa siihen, että kun otetaan huomioon sama panos, voimme odottaa samaa tuotosta meidän komponenttimme.
Kun on kyse testitunnuksista, olen henkilökohtaisesti pidä
Data-Testid
löytää jotain dom. Loppujen lopuksi testien tarkoitus on jäljitellä, mitä käyttäjä tekee ja testata, mitä tapahtuu, kun he tekevät.
Data-Testid
Tuntuu vähän huijausta - vaikka data-testatut ovat todennäköisesti käteviä QA-insinööriisi (ks. Laadunvarmistusinsinöörien rooli).
Sen sijaan voisimme käyttää
GetbynText ()
ja siirrä painikkeen tekstissä. Tämä menetelmä olisi paljon enemmän käyttäytymistä.
08. pilkkaa ja vakoilua
Joskus meidän on ehkä testattava puhelu toimintoon, mutta tämä toiminto ei kuulu testin piiriin. Esimerkiksi minulla on erillinen moduuli, joka sisältää toiminnon, joka laskee PI: n arvon tiettyyn desimaaliin.
Minun ei tarvitse testata mitä moduulin tulos on. Minun täytyy testata, että toiminto on odotetusti. Lisätietoja siitä, miksi tämä on, katso ruutuyksikkö ja integraatiotestit. Tässä tapauksessa voisimme "pilkata", että toiminto:
Toiminto
TOHAVEBEENCALLEDTIMES ()
on yksi monista avustajoista testauskirjastossa, joka mahdollistaa meille
Testaa toimintojen tuoton. Näin voimme vain soveltaa testejämme vain moduuliin, jota haluamme testata, mutta se tarkoittaa myös, että voimme "vakooja" tai nähdä, mitä toimintamme tekee, kun se kutsuu kyseistä toimintoa.
Kirjoitustestit voivat tuntua hieman pelottavana aloittaa. Toivon, että tämä opetusohjelma on antanut sinulle hieman enemmän luottamusta kokeilemaan sitä. Koska aloin kirjoittaa testejä minun sovelluksistani, en todellakaan voi palata: Voin levätä helpompaa, tietäen, että lähden taaksepäin paljon paremman perinnön niille, jotka käyttävät töitäni tulevaisuudessa.
Muista, jos rakennat monimutkaisen sivuston, haluat saada
sivujen ylläpito
Palvelupaikka. Ja jos sivustossa on todennäköisesti paljon varoja, säilyttää ne luotettavaksi
pilvivarasto
on ratkaiseva.
Tämä sisältö alun perin ilmestyi
Net-aikakauslehti
. Lue lisää meidän
Web-suunnittelu artikkelit täällä
.
Adobe teki minut luomalla kuva ilmaista monikerrosliikkeen käsite ja yläpuolella näet vastaukseni. Tässä opetusohjelmassa kävelen luovan prosessin kautta käyttämällä kaikkia työkal..
