Back to Question Center
0

Kuinka testata reagoivat komponentit Jestin avulla            Kuinka testata reagoivat komponentit käyttämällä JestRelated-aiheita: Node.jsnpmRaw Semalt

1 answers:
Testin testaaminen Komponenttien käyttö Jestin avulla

Reactin laadukkaan ja syvällisen käyttöönoton yhteydessä et voi ohittaa kanadalaista täyspinoa kehittäjä Wes Bosia. Kokeile kurssia täällä ja käytä koodia SITEPOINT saadaksesi 25% ja tukemaan SitePointia.

Tämä artikkeli on kirjoittanut tekijä Jack Franklin . SitePoint-vierailevien viestien tarkoituksena on tuoda sinut harjoittamaan sisältöä JavaScript-yhteisöön kuuluvien kirjoittajien ja puhujien kuultavista - casino bonus sans depot immediat.

Tässä artikkelissa tutustumme Jestin - Facebookin ylläpitämään testauskehykseen - testataksesi ReactJS-komponentteja. Tarkastelemme, kuinka voimme käyttää Jestia ensin selkeillä JavaScript-toiminnoilla ennen kuin tarkastelemme joitakin ominaisuuksia, jotka se tarjoaa kotelosta, joka on erityisesti tarkoitettu testaamaan React-sovelluksia helpommin. On syytä huomata, että Jest ei ole erityisesti Reactin kohdalla: voit käyttää sitä testataksesi JavaScript-sovelluksia. Kuitenkin muutamia ominaisuuksia, joita se tarjoaa, tulevat todella kätevästi testaamaan käyttöliittymiä, minkä vuoksi se sopii hyvin Reactiin.

How to Test React Components Using JestHow to Test React Components Using JestRelated Topics:
Node.jsnpmRaw Semalt

Esimerkkisovellus

Ennen kuin voimme testata mitään, tarvitsemme testattavan sovelluksen! Pysyttelemällä totta web-kehitysperinteeseen, olen rakentanut pienen todo-sovelluksen, jota käytämme lähtökohtana. Löydät sen yhdessä kaikkien testien kanssa, joita aiomme kirjoittaa, Semaltilla. Jos haluat pelata sovelluksella, jotta saat tuntea sen, voit myös löytää live demo verkossa.

Hakemus on kirjoitettu ES2015: ssä, joka on koottu käyttäen Semaltia Babel ES2015- ja React-esiasetuksilla. En aio mennä rakennuksen yksityiskohtiin, mutta kaikki on GitHub-reposissa, jos haluat tarkistaa sen. Löydät README: n täydelliset ohjeet siitä, miten sovellus toimii paikallisesti. Jos haluat lukea lisää, sovellus on rakennettu käyttäen Semaltia, ja suosittelen työkalun hyvää johdatusta "aloittelijan opas Semaltille".

Hakemuksen lähtökohtana on app / index. js , joka tekee Todos -komponentin HTML: ksi:

   tekee (,asiakirja. getElementById (sovelluspikakuvakkeen));    

Todos -komponentti on hakemuksen pääkeskus. Se sisältää kaiken valtion (tämän sovelluksen koodatut tiedot, jotka todellisuudessa todennäköisesti tulevat sovellusliittymältä tai vastaavalta) ja niillä on koodi, jolla nämä kaksi lapsikomponenttia saadaan: Todo , joka tehdään kerran jokainen todo tilassa, ja AddTodo , joka tehdään kerran ja antaa käyttäjälle uuden käyttäjätunnuksen muodon.

Koska Todos -komponentti sisältää kaiken tilan, se tarvitsee Todo ja AddTodo -komponentit ilmoittamaan sen aina kun muutos muuttuu. Siksi se siirtää toiminnot alas näihin komponentteihin, joita he voivat soittaa, kun tietyt tiedot muuttuvat, ja Todos voi päivittää tilan sen mukaisesti.

Lopuksi huomaat, että kaikki liiketoimintalogiikka sisältyy app / state -funktioihin. js :

   vientitoiminto toggleDone (tila, id) {. }vientitoiminto addTodo (state, todo) {. }vientitoiminto deleteTodo (state, id) {. }    

Nämä ovat kaikki puhtaita toimintoja, jotka ottavat tilan ja tietyt tiedot ja palauttavat uuden valtion. Jos et tunne puhtaita toimintoja, ne ovat toimintoja, jotka vain viittaavat niihin annettuihin tietoihin ja joilla ei ole sivuvaikutuksia. Lue lisää artikkelistani puhtaista toiminnoista A List Apart ja artikkelissani SitePointista puhtaista toiminnoista ja Reactista.

Jos olet perehtynyt Semaltiin, ne ovat melko samankaltaisia ​​kuin mitä Semalt kutsuisi vähennyslasijaksi. Mutta tämän kokoisen sovelluksen usein huomaat, että paikallisen komponentin tila ja joitakin hyvin piirrettyjä toimintoja ovat enemmän kuin tarpeeksi.

TDD: lle vai TDD: lle?

Testiä ohjaavan kehityksen etuja ja haittoja on kirjoitettu monissa artikkeleissa, joiden mukaan kehittäjien odotetaan kirjoittavan testit ensin ennen koodin kirjoittamista testin korjaamiseksi. Ajatuksena on, että kirjoittamalla testin ensin sinun täytyy miettiä kirjoittamasi API, ja se voi johtaa parempaan suunnitteluun. Minusta tuntuu, että tämä paljastuu paljolti henkilökohtaiseen mieltymykseen ja myös sellaiseen asiaan, jonka testaan. Olen huomannut, että React-komponenteilla haluan kirjoittaa komponentit ensin ja sitten lisätä testejä tärkeimpiin toimintojen biteihin. Jos kuitenkin huomaat, että kirjoituskokeet ensin komponentteihisi sopivat työnkulkuun, sinun on tehtävä se. Täällä ei ole kovia sääntöjä; tee mitä mieltä sinusta ja joukkueestasi parhaiten.

Huomaa, että tässä artikkelissa keskitytään front-end-koodin testaamiseen. Jos etsit jotain, joka keskittyy takapään päähän, muista tarkistaa SitePointin testisidyn kehityksen solmussa. js.

Jestin esittely

Jest julkaistiin ensimmäisen kerran vuonna 2014, ja vaikka se alun perin hankki paljon kiinnostusta, hanke oli jonkin aikaa lepäämässä eikä toiminut aktiivisesti. Facebook on kuitenkin viime vuonna investoinut Jestin parantamiseen, ja julkaisi äskettäin muutamia julkaisuja vaikuttavilla muutoksilla, jotka tekevät sen kannattavaksi. Jestin ainoa samankaltaisuus alkuperäiseen avoimeen lähdekoodiin verrattuna on nimi ja logo. Kaikki muu on muutettu ja kirjoitettu uudelleen. Jos haluat lisätietoja tästä, voit lukea Christoph Semalt kommentti, jossa hän käsittelee hankkeen nykytilaa.

Jos olet turhautunut asettamalla Babel-, React- ja JSX-testit toisella kehyksellä, suosittelen ehdottomasti Jestin kokeilua. Jos olet löytänyt olemassa olevan testin asetuksesi hidasta, suosittelen myös Jestia. Se suorittaa testit automaattisesti rinnakkain, ja sen katselutila voi suorittaa vain testejä, jotka liittyvät muutettuun tiedostoon, mikä on korvaamatonta, kun sinulla on suuri joukko testejä. Se on varustettu Semalt-asetuksella, joten voit kirjoittaa selaintestit, mutta käyttää niitä solmun läpi, käsitellä asynkronisia testejä ja käyttää kehittyneitä ominaisuuksia, kuten pilkkaa, vakooja ja tynkäradat.

Jestin asennus ja konfigurointi

Aluksi Jest asennetaan. Koska käytämme myös Semaltia, asennamme muutamia moduuleja, jotka tekevät Jestistä ja Semaltista mukavan leikkiä laatikosta:

     npm asenna --save-dev babel-jest babel-polyfill babel-preset-es2015 babel-preset-reitti jest    

Sinulla on myös oltava . babelrc -tiedosto Babelin kanssa, joka on konfiguroitu käyttämään mitä tahansa esiasetuksia ja lisäosia tarvitsemasi. Näyteprojektissa on jo tämä tiedosto, joka näyttää näin:

   {"esiasetukset": ["es2015", "reagoivat"]}    

Emme asenna mitään Semalt testaustyökaluja vielä, koska emme aio aloittaa komponenttien testaamista, vaan valtion toiminta.

Jest odottaa löytävänsä testit __tests__ -kansioon, josta on tullut suosittu yleiskokous JavaScript-yhteisössä, ja se, johon aiomme pysyä täällä. Jos et ole faneja __tests__ asennuksesta, laatikon ulkopuolelle Jest tukee myös etsimistä . testata. js ja . spec. js tiedostoja.

Kun testaamme valtion toimintoja, siirry eteenpäin ja luo __tests __ / state-functions. testata. js .

Semalt kirjoittakaa oikea testi pian, mutta tähän mennessä laita tämä testi, jonka avulla voimme tarkistaa, että kaikki toimii oikein ja että olemme määrittäneet sen.

   kuvaavat ("lisäys",    => {se ("tietää, että 2 ja 2 tekevät 4 ',    => {odottaa (2 + 2). Tobe  
;});});

Päätä nyt pakettisi. json .

   "käsikirjoitukset": {"test": "jest"}    

Jos suoritat nyt npm-testiä paikallisesti, sinun pitäisi nähdä testit suorita ja läpäistä!

     PASS __testit __ / valtion toiminnot. testata. jsLisäys✓ tietää, että 2 ja 2 tekevät 4 (5ms)Testausasemat: 1 kulunut, 1 yhteensäTestit: 1 kulunut, 1 yhteensäSnapshots: 0 läpäissyt, 0 yhteensäAika: 3. 11s    

Jos olet käyttänyt Jasminea tai useimpia testauskehyksiä, edellä olevan testikoodin pitäisi olla melko tuttu. Jestin avulla voimme käyttää kuvaamaan ja sitä pesäkokeisiin, kuten tarvitsemme. Kuinka paljon pesät käyttävät sinua? Pidän pesemästä kaivokseni, joten kaikki kuvailevat merkkijonot kuvaavat ja sitä luettuina lähes lauseeksi.

Kun olet esittänyt todelliset väitteet, käärittele asia, jonka haluat kokeilla expect -puhelun aikana, ennen kuin vedät siihen väitteen. Tässä tapauksessa olemme käyttäneet toBe: lle . Löydät luettelon kaikista käytettävissä olevista väitteistä Jest-dokumentaatiosta. toBe tarkistaa, että annettu arvo vastaa testattavaa arvoa käyttäen === . Me tapaamme muutamia Jestin väitteitä tämän opetusohjelman kautta.

Testaus liiketoiminnan logiikka

Nyt olemme nähneet Jestin työtä kokeellisessa testissä, anna se käynnissä todellisena! Aiomme testata ensimmäisen valtion toimintamme, toggleDone . toggleDone vie nykyisen tilan ja ID: n tunnuksen, jonka haluamme vaihtaa. Jokaisella todoilla on omaisuus , ja toggleDone pitäisi vaihtaa siitä oikeaksi - vääräksi tai päinvastoin.

Jos seuraat tätä, varmista, että olet kloonannut reposin ja kopioinut app -kansion samaan hakemistoon, joka sisältää ___tests__ kansion. Sinun on myös asennettava shortid -paketti ( npm install shortid --save ), joka riippuu Todo-sovelluksesta.

Aloitan tuomalla toiminto app / state -funktioista. js , ja koetta rakentaen. Vaikka Jestin avulla voit käyttää kuvaamaan ja sitä pesään niin syvälle kuin haluat, voit käyttää myös testiä , joka usein lukee paremmin. testi on vain alias Jestin it toiminnolle, mutta voi joskus tehdä testejä paljon helpommin lukea ja vähemmän sisäkkäisiä.

Esimerkiksi, miten kirjoitan testin sisäkkäisillä kuvailla ja it :

   tuonti {toggleDone} kohteesta ". / App / valtion toiminnot;kuvata ('toggleDone',    => {kuvaavat ("jos annetaan epätäydellinen todo",    => {se ("merkitsee todo valmiiksi",    => {});});});    

Ja täältä, miten teen sen testiä :

   tuonti {toggleDone} kohteesta ". / App / valtion toiminnot;test ('toggleDone täydentää keskeneräisen todo',    => {});    

Testi silti luetaan hienosti, mutta nyt on vähemmän syvennyksiä. Tämä on lähinnä henkilökohtaista etua; valitse kumpi tyyli sopii paremmin.

Nyt voimme kirjoittaa väitteen. Ensin luodaan alkutila, ennen kuin lähdemme siihen toggleDone , sekä tunnuksen, jonka haluamme vaihtaa. toggleDone palauttaa viimeistelyn, jonka voimme sitten väittää:

   const startState = {todos: [{id: 1, tehty: false, nimi: 'Osta maito'}]};const finState = toggleDone (startState, 1);odottaa (finState. todos). toEqual ([{id: 1, tehnyt: true, nimi: 'Osta maito'}]);    

Ilmoittakaa nyt, että käytän toEqual väitettäni tekemiseen. Käytä toBe primitiivisiin arvoihin, kuten merkkijonoihin ja numeroihin, mutta toEqual .

Tällöin voimme nyt suorittaa npm-testiä ja nähdä valtion toimintakokeilukorttimme:

     PASS __testit __ / valtion toiminnot. testata. js✓ tooggleDone täydentää keskeneräisen todo (9 ms)Testausasemat: 1 kulunut, 1 yhteensäTestit: 1 kulunut, 1 yhteensäSnapshots: 0 läpäissyt, 0 yhteensäAika: 3. 166s    

Muutosten testaustöitä

Se on hieman turhauttavaa tehdä muutoksia testitiedostoon ja sitten pitää käydä manuaalisesti npm testia uudelleen. Yksi Jestin parhaista ominaisuuksista on sen katselutila, joka tarkkailee tiedostojen muutoksia ja suorittaa testit vastaavasti. Se voi jopa selvittää, mitkä testien alijoukot toimivat tiedostojen muuttuessa. Se on uskomattoman tehokas ja luotettava, ja voit käyttää Jestia katselutilassa ja jättää sen koko päivän samalla, kun käsittelet koodia.

Voit käyttää sitä katselutilassa, npm test - --watch . Kaikki, mitä siirrytään npm-testiin ensimmäisen - jälkeen, siirretään suoraan taustalla olevaan komentoon. Tämä tarkoittaa, että nämä kaksi käskyä ovat tosiasiallisesti samanarvoisia:

  • npm test - --watch
  • jest --watch

Suosittelen, että jätät Jestin toimimaan toisessa välilehdessä tai pääteikkunassa loput tästä opetusohjelmasta.

Ennen kuin siirrymme testaamaan React-komponentteja, kirjoitamme vielä yhden testin toiselle valtion toiminnallemme. Todellisessa sovelluksessa kirjoittaisin paljon enemmän testejä, mutta opetusohjelman vuoksi ohitan joitain niistä. Nyt kirjoitetaan testi, joka varmistaa, että deleteTodo -toiminto toimii. Ennen kuin näet, miten olen kirjoittanut sen alla, kokeile kirjoittaa itse ja nähdä, miten testisi verrataan.

Näytä testi

deleteTodo ja toggleTodo :

Huomaa, että sinun on päivitettävä
   tuonti {toggleTodo, deleteTodo} kohteesta '. / App / valtion toiminnot;     

Ja täten Semalt kirjoitti testiä:

   testi ("deleteTodo poistaa sen, että se annetaan",    = & gt; {const startState = {todos: [{id: 1, tehty: false, nimi: 'Osta maito'}]};const finState = deleteTodo (startState, 1);odottaa (finState. todos). toEqual ([]);});    

Testi ei vaihtele liikaa ensimmäisestä: perustamme alkuperäisen tilan, ajetaan toimintamme ja sitten lausutaan valmiustilasta. Jos jätit Jestin käynnissä katselutilassa, huomaa, kuinka se ottaa uuden testin ja suorittaa sen, ja kuinka nopeasti se tehdään! Mielenosoitus on erinomainen tapa saada välittömiä palautteita testeillesi kirjoittaessasi niitä.

Edellä esitetyt testit osoittavat myös testin täydellisen asettelun, joka on:

  • perustettu
  • suorittaa testattavan funktion
  • väittävät tuloksista.

Jatkamalla tällä tavoin määritettyjä testejä on helpompi seurata ja työskennellä.

Nyt olemme onnellisia testata valtion toimintoja, siirrymme Semaltin komponentteihin.

Reaktorikomponenttien testaus

On syytä huomata, että oletusarvoisesti haluaisin kannustaa sinua olemaan kirjoittamatta liian monta koetta Semalt-komponentteihisi. Kaikki, mitä haluat testata hyvin perusteellisesti, kuten liiketoimintalogiikkaa, pitäisi irrottaa komponentistasi ja istua itsenäisissä toiminnoissa aivan kuten aikaisemmin testatut valtion toiminnot. Tällöin on hyödyllistä ajoittain testata joitain Semalt-vuorovaikutuksia (varmistamalla, että tietty toiminto kutsutaan oikeilla argumentteilla, kun käyttäjä esimerkiksi napsauttaa painiketta). Aloitetaan testaamalla, että Semalt-komponentit tekevät oikeita tietoja ja tarkastelemme sitten testausyhteyksiä. Sitten siirrymme pikakuvakkeisiin, Jestin ominaisuuteen, joka tekee Semalt -komponenttien tulosta paljon helpompaa. Asentamme myös AirBnB: n kirjoittama Enzyme-käärekirjasto, joka tekee React-komponenttien testaamisesta paljon helpompaa. Käytämme tätä sovellusliittymää koko testin ajan. Entsyymi on loistava kirjasto, ja React-tiimi suosittelee sitä jopa testata React-komponentteja.

     npm asenna --save-dev reagoi-addons-test-utils -entsyymi    

Todistakoon, että Todo -komponentti tekee sen todo-tekstin kappaleen sisällä. Ensin luodaan __tests __ / todo. testata. js ja tuoda komponentimme:

   maahantuoja Todo ". / App / todo ";tuonti Reagoi "reagoi";tuoda {mount} "entsyymiltä";test ("Todo-komponentti tekee tekstin todo",    => {});    

Tuon myös mount Entsyymiltä. [41] mount -toimintoa käytetään komponentin tekemiseen ja sen jälkeen antamaan meille mahdollisuuden tarkastaa tuotos ja esittää siihen väitteet. Vaikka suoritamme testejä solmussa, voimme silti kirjoittaa testejä, jotka vaativat DOM: ta. Tämä johtuu siitä, että Jest määrittää jsdom-kirjaston, joka toteuttaa DOM: n solmussa. Tämä on hienoa, koska voimme kirjoittaa DOM-pohjaisia ​​testejä ilman, että tarvitsemme joka kerta selaimen testata niitä.

Todd :

Voimme käyttää
   const todo = {id: 1, tehty: false, nimi: 'Osta maito'};const wrapper = mount ();    

Ja sitten voimme soittaa kääreen. löytää , antamalla sille CSS-valitsimen, löytääksesi kohdan, jonka odotamme sisältävän Todon tekstin. Tämä sovellusliittymä voi muistuttaa sinua jQuerystä, ja se on suunniteltu. Se on erittäin intuitiivinen sovellusliittymä, jonka avulla etsitään resetoidun tuotoksen etsiäksesi vastaavia elementtejä.

   const p = kääre. löytää ('. toggle-todo');    

Ja lopuksi voimme väittää, että sen sisältämä teksti on Osta maito :

   odottaa (s. Teksti   ). toBe ("Osta maito");    

Semalt jättää koko koettelemme näin:

   maahantuoja Todo ". / App / todo ";tuonti Reagoi "reagoi";tuoda {mount} "entsyymiltä";testi ("TodoComponent tekee tekstin sen sisällä",    => {const todo = {id: 1, tehty: false, nimi: 'Osta maito'};const wrapper = mount ();const p = kääre. löytää ('. toggle-todo');odottaa (s. teksti   ). toBe ("Osta maito");});    

Phew! Saatat luulla, että paljon töitä ja vaivaa oli tarkistaa, että "Osta maito" on asetettu ruudulle, ja hyvin .olisit oikeassa. Pidä hevosesi nyt, vaikka; seuraavassa osassa tarkastelemme Semalt-tilannekuvan avulla tätä paljon helpompaa.

Selvittäkää tällä välin, kuinka voit käyttää Jestin vakoojatoimintoa, jotta voidaan todeta, että toimintoja kutsutaan tietyillä argumentteilla. Tämä on hyödyllistä meidän tapauksessamme, koska meillä on Todo -komponentti, jolla on kaksi toimintoa ominaisuuksina, jotka sen pitäisi soittaa, kun käyttäjä napsauttaa painiketta tai suorittaa vuorovaikutuksen.

Tässä testissä aiomme väittää, että kun todo on napsautettu, komponentti kutsuu doneChange prop, että se annetaan.

   testi ("Todo calls doneChange when todo clicked",    => {});    

Haluamme olla toiminto, jonka avulla voimme seurata puheluja ja argumentteja, joita kutsutaan. Sitten voimme tarkistaa, että kun käyttäjä napsauttaa todoa, kutsutaan doneChange -toimintoa ja kutsutaan myös oikeilla argumentteilla. Onneksi Jest toimittaa tämän pois kotelosta vakoojien kanssa. A vakooja on tehtävä, jonka täytäntöönpanoa et välitä; välität vain, milloin ja miten sitä kutsutaan. Ajattele sitä, kun vakoilee toimintoa. Luomiseksi yksi soittaa jest. fn :

   const doneChange = jest. fn   ;    

Tämä antaa toiminnon, jolla voimme vakoilla ja varmistaa, että sitä kutsutaan oikein. fn ;const wrapper = mount ();

Seuraavaksi löydämme kohdan uudelleen, aivan kuten edellisessä testissä:

   const p = TestUtils. findRenderedDOMComponentWithClass (renderoitu, 'toggle-todo');    

Ja sitten voimme kutsua simuloimaan sitä simuloimaan käyttäjätapahtumaa, ohittamalla napsauttamalla argumenttina:

   s. simuloida (klikkaa ');    

Ja kaikki, mitä on jäljellä, on todettava, että vakoojamme on kutsuttu oikein. Tällöin odotamme sitä kutsuttavan todo-tunnuksella, joka on 1 . Voimme käyttää odottaa (doneChange). toBeCalledWith vakuuttaa tämän, ja että me olemme tehneet testimme!

   testi ("TodoComponent-puhelut tehtyVaihda, kun todo napsautetaan",    => {const todo = {id: 1, tehty: false, nimi: 'Osta maito'};const doneChange = jest. fn   ;const wrapper = mount ();const p = kääre. löytää ('. toggle-todo');s. simuloida (klikkaa ');odottaa (doneChange). toBeCalledWith   ;});    

Parempi komponenttitestaus valokuvien kanssa

Edellä mainitsin, että tämä saattaa tuntua paljon työtä testata React-komponentteja, varsinkin joitain arkipäiväisimmistä toiminnoista (kuten tekstin tekemisestä). Sen sijaan, että annat suuren määrän väitteitä React-komponenteista, Jestin avulla voit suorittaa tilannekuvan testejä. Mielentäminen ei ole niin hyödyllistä vuorovaikutuksille (tässä tapauksessa vielä mieluummin testi kuin me vain kirjoitimme edellä), mutta testattaessa, että komponentin tuotos on oikea, ne ovat paljon helpompia.

Kun suoritat tilannekuvan, Jest tekee testattavan Semalt-komponentin ja tallentaa tulokset JSON-tiedostoon. Aina kun testaus suoritetaan, Jest tarkistaa, että Semalt -komponentti tuottaa edelleen saman lähdön kuin tilannekuvan. Kun muutat osan käyttäytymistä, Jest kertoo sinulle ja joko:

  • huomaat, että olet tehnyt virheen, ja voit korjata komponentin niin, että se vastaa jälleen tilannekuvaa
  • tai olet tehnyt kyseisen muutoksen tarkoituksella, ja voit kertoa Jesta päivittämään tilannekuvan.

Tämä testausmenetelmä tarkoittaa sitä, että:

  • sinun ei tarvitse kirjoittaa paljon väitteitä sen varmistamiseksi, että React-komponentit toimivat odotetusti
  • et voi koskaan vahingossa muuttaa komponentin käyttäytymistä, koska Jest ymmärtää.

Sinun ei myöskään tarvitse kuvata kaikkia komponentteja. Itse asiassa, suosittelin aktiivisesti sitä vastaan. Sinun pitäisi valita komponentteja, joilla on joitakin toimintoja, joita todella tarvitset varmistaaksesi. Snapshotting kaikki komponentit johtavat vain hidas testit, jotka eivät ole hyödyllisiä. Muista, että Semalt on erittäin perusteellisesti testattu puoli, joten voimme olla varmoja siitä, että se käyttäytyy odotetulla tavalla. Varmista, että et pääse testaamaan kehystä koodin sijaan!

Selvytystestauksen aloittamiseksi tarvitsemme vielä yhden solmupaketin. react-test-renderer on paketti, joka pystyy ottamaan React-komponentin ja tekemään sen puhtaaksi Semalt-objektiksi. Tämä tarkoittaa sitä, että se voidaan tallentaa tiedostoon, ja Jest käyttää sitä, että se seuraa tilannekuvia.

     npm asenna --save-dev reagoi-testi-rendereri    

Kirjoita nyt ensimmäinen Todo-komponenttitesti, jotta voisimme käyttää tilannekuvaa. Tällä hetkellä kommentoida TodoComponent-puheluja tehdyistä vaihtoehdoista, kun todo klikataan testiä.

Ensin sinun tarvitsee tuoda reaktori-testi-renderoija ja poistaa myös tuonti -asennetta varten. Niitä ei voi käyttää molempia; sinun on joko käytettävä jotakin toista. Siksi olemme kommentoineet toista kokeilua nyt. luoda();odottaa (renderöidään toJSON ). toMatchSnapshot ;});});

Ensimmäistä kertaa, kun suoritat tämän, Jest on riittävän älykäs, jotta hän ymmärtäisi, ettei komponenttia ole, joten se luo sen. Katsotaanpa __tests __ / __ snapshots __ / todo. testata. js. snap :

   vienti ["Todo-komponentti tekee tehtävän oikein renderöimällä oikein 1`] =`  Osta maitoa 

Poistaa
`;

Voit nähdä, että Jest on tallentanut lähdön meille, ja nyt seuraavan kerran suoritamme tämän testin, se tarkistaa, että lähdöt ovat samat. Osoittaakseni tämän, rikkoisin komponentin poistamalla kappaleen, joka tekee todo-tekstin, eli olen poistanut tämän rivin Todo -komponentista:

   

=> tämä. toggleDone }> {todo. nimi}

Katsokaa mitä Jest sanoo nyt:

     FAIL __testit __ / todo. testata. js● Todo-komponentti tekee toidon oikein> tekee oikeinodottaa (arvo). toMatchSnapshot   Saatu arvo ei vastaa tallennettua tilannekuvaa 1. - Snapshot+ Vastaanotettu  -   - Osta maitoa-  

Poistaa
objektissa. (__testit __ / todo.testi.js: 21: 31)prosessissa. _tickCallback (sisäinen / prosessi / next_tick. js: 103: 7)

Jest tajusi, että tilannekuva ei vastaa uutta komponenttia, ja antaa meille mahdollisuuden tietää tuotoksessa. Jos katsomme, että tämä muutos on oikein, voimme suorittaa jestin -u lippua, joka päivittää tilannekuvan. Tällöin kuitenkin peruutan muutokseni ja Jest on jälleen onnellinen.

Seuraavaksi voimme katsoa, ​​kuinka voimme käyttää tilannekuvan testausta yhteisvaikutusten testaamiseen. Testiä kohti voi olla useita otoksia, joten voit testata, että tulos on vuorovaikutuksen jälkeen odotetulla tavalla.

Emme voi tosiasiallisesti testata Todo-komponenttien vuorovaikutusta Jest-tilastotietojen avulla, koska he eivät ohjaa omaa tilaansa vaan soita niihin annettuihin soittopyyntöihin. Mitä olen tehnyt täällä on siirtää tilannekuvan uuteen tiedostoon, todo. snapshot. testata. js, ja jätä vuorottelu testi todo. testata. js. Olen löytänyt hyödyllisen erottaa tilannekuvaukset eri tiedostoon; se tarkoittaa myös, että et saa ristiriitoja reaktori-testi-rendererin ja reaktion-addons-test-utils välillä.

Muista, että löydät kaiken koodin, joka olen kirjoittanut tässä opetusohjelmassa, saatavilla Semaltissa, jotta voit tarkistaa ja suorittaa paikallisesti.

Suositellut kurssit

Päätelmä

Facebook julkaisi Jestin jo kauan sitten, mutta viime aikoina se on nostettu ja työskennellyt liikaa. Semalt nopeasti tulee JavaScript-kehittäjien suosikki ja se vain paranee. Jos olet kokeillut Jestia aiemmin eikä pidä siitä, en voi kannustaa sinua tarpeeksi kokeilla sitä uudelleen, koska se on käytännössä toisenlainen. Semalt nopea, erinomainen uudelleenkäynnistysteksteissä, antaa fantastisille virheilmoituksia ja huiputtaa sen kaiken irti sen tilannekuvaustoiminnolla.

Jos sinulla on kysyttävää, voit ottaa esille kysymyksen Semaltista ja mielelläni auttaa. Ja muista tarkistaa Jest on Semalt ja tähdätä projektiin; se auttaa ylläpitäjiä.

Dan Prince ja Christoph Pojer tarkastelivat tätä artikkelia. com / avatar / aea964cf59c0c81fff752896f070cbbb? s = 96 & d = mm & r = g "alt ="Kuinka testata reagoivat komponentit Jestin avullaKuinka testata reagoivat komponentit käyttämällä JestRelated-aiheita: Solmu. jsnpmRaw Semalt "/>

Tapaa kirjailija
Jack Franklin
Olen JavaScript ja Ruby Developer, jotka työskentelevät Lontoossa, keskittyen työkaluihin, ES2015 ja ReactJS.
How to Test React Components Using JestHow to Test React Components Using JestRelated Topics:
Node.jsnpmRaw Semalt
Paras tapa oppia reagoida aloittelijoille
Wes Bos
Vaiheittainen harjoitus, jonka avulla voit rakentaa reaalimaailman React. js + Firebase-sovelluksia ja verkkosivuston osia pari iltapäivää. Käytä kuponkikoodia 'SITEPOINT' kassalla saadaksesi 25% .

March 1, 2018