Back to Question Center
0

Hoe react componenten te testen met Jest            React-componenten testen met JestRelated Onderwerpen: Node.jsnpmRaw Semalt

1 answers:
Hoe react componenten te testen met Jest

Voor een hoogwaardige, grondige kennismaking met React, kun je niet voorbij de Canadese full-stack-ontwikkelaar Wes Bos gaan. Probeer zijn cursus hier, en gebruik de code SITEPOINT om 25% korting te krijgen en om SitePoint te helpen ondersteunen.

Dit artikel is geschreven door gastschrijver Jack Franklin . SitePoint-gastberichten zijn bedoeld om aantrekkelijke inhoud van prominente schrijvers en sprekers van de JavaScript-community te brengen.

In dit artikel zullen we een kijkje nemen bij het gebruik van Jest - een testraamwerk dat wordt onderhouden door Facebook - om onze ReactJS-componenten te testen. We zullen bekijken hoe we Jest het eerst kunnen gebruiken op basis van JavaScript-functies, voordat we enkele van de functies bekijken die het direct biedt, specifiek gericht op het maken van het testen van React-apps eenvoudiger - china keyrings designer. Het is vermeldenswaard dat Jest niet specifiek op React is gericht: u kunt het gebruiken om JavaScript-toepassingen te testen. Een paar van de functies die het biedt, zijn echter erg handig voor het testen van gebruikersinterfaces. Daarom past het uitstekend bij React.

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

Voorbeeldapplicatie

Voordat we iets kunnen testen, hebben we een applicatie nodig om te testen! Trouw aan de traditie van webontwikkeling, heb ik een kleine todo-applicatie gebouwd die we als uitgangspunt zullen gebruiken. Je vindt het, samen met alle tests die we gaan schrijven, op Semalt. Als je met de applicatie wilt spelen om een ​​gevoel te krijgen, kun je ook online een live demo vinden.

De aanvraag is geschreven in ES2015, samengesteld met Semalt met de Babel ES2015 en React-presets. Ik zal niet ingaan op de details van de build set-up, maar het staat allemaal in de GitHub repo als je het wilt bekijken. Je vindt volledige instructies in de README over hoe je de app lokaal kunt laten werken. Als je meer wilt lezen, is de applicatie gebouwd met behulp van Semalt en ik raad "Een beginnersgids voor Semalt" aan als een goede introductie tot de tool.

Het beginpunt van de applicatie is app / index. js , die de component Todos gewoon in de HTML teruggeeft:

   render (,document. getElementById ( 'app'));    

De component Todos is de belangrijkste hub van de toepassing. Het bevat alle status (hard-gecodeerde gegevens voor deze toepassing, die in werkelijkheid waarschijnlijk afkomstig zijn van een API of iets dergelijks), en heeft code om de twee onderliggende componenten weer te geven: Todo , die eenmaal wordt weergegeven voor elke taak in de staat, en AddTode , die eenmaal wordt weergegeven en de vorm voor een gebruiker biedt om een ​​nieuwe taak toe te voegen.

Omdat de component Todos de volledige staat bevat, heeft deze de Todo en AddTodo -componenten nodig om dit te melden wanneer iets verandert. Daarom geeft het functies door aan deze componenten die ze kunnen oproepen wanneer bepaalde gegevens veranderen, en Todos kan de status dienovereenkomstig bijwerken.

Tot slot zul je voor nu merken dat alle bedrijfslogica is vervat in app / state-functies. js :

   exportfunctie toggleDone (status, id) {. }exportfunctie addTodo (state, todo) {. }exportfunctie deleteToevoegen (staat, id) {. }    

Dit zijn allemaal pure functies die de status en enkele gegevens in beslag nemen en de nieuwe status retourneren. Als u niet bekend bent met pure functies, zijn dit functies die alleen verwijzen naar gegevens die ze hebben gekregen en geen bijwerkingen hebben. Voor meer informatie kunt u mijn artikel over A List Apart over pure functies en mijn artikel over SitePoint over pure functies en React lezen.

Als u bekend bent met Semalt, lijken ze redelijk op wat Semalt een reducer zou noemen. Maar voor deze toepassing zul je vaak merken dat de lokale componentstatus en sommige goed geabstraheerde functies meer dan voldoende zijn.

Op TDD of niet op TDD?

Er zijn veel artikelen geschreven over de voors en tegens van proefgestuurde ontwikkeling , waarbij van ontwikkelaars wordt verwacht dat zij de tests eerst schrijven, voordat de code wordt geschreven om de test te repareren. Het idee hierachter is dat je, door eerst de test te schrijven, moet nadenken over de API die je aan het schrijven bent, en het kan leiden tot een beter ontwerp. Voor mij vind ik dat dit heel erg neerkomt op persoonlijke voorkeur en ook op het soort dingen dat ik aan het testen ben. Ik heb gemerkt dat ik, voor React-componenten, de componenten het eerst schrijf en vervolgens tests toevoeg aan de belangrijkste functies. Als u echter vindt dat het schrijven van tests eerst voor uw componenten geschikt is voor uw workflow, dan zou u dat moeten doen. Er is hier geen harde regel; doe wat je het beste voelt voor jou en je team.

Merk op dat dit artikel zich zal concentreren op het testen van front-end code. Als u op zoek bent naar iets dat op de achterkant gericht is, kijk dan eens naar de cursus Test-driven ontwikkeling in het knooppunt van SitePoint. js.

Introductie van Jest

Jest werd voor het eerst uitgebracht in 2014, en hoewel het aanvankelijk veel belangstelling oogstte, bleef het project een tijdje inactief en niet zo actief bewerkt. Facebook heeft het afgelopen jaar echter geïnvesteerd in het verbeteren van Jest en heeft onlangs een aantal releases gepubliceerd met indrukwekkende veranderingen die het heroverwegen waard zijn. De enige gelijkenis van Jest in vergelijking met de eerste open-source release is de naam en het logo. Al het andere is veranderd en herschreven. Als je hier meer over wilt weten, kun je de commentaar van Christoph Semalt lezen, waarin hij de huidige status van het project bespreekt.

Als je gefrustreerd bent door het opzetten van Babel, React en JSX-tests met een ander framework, dan raad ik zeker aan om Jest eens te proberen. Als je hebt vastgesteld dat je bestaande testopstelling traag is, raad ik Jest ook ten zeerste aan. Het voert automatisch testen parallel uit en de watch-modus kan alleen tests uitvoeren die relevant zijn voor het gewijzigde bestand, wat van onschatbare waarde is wanneer u een groot aantal tests hebt. Het wordt geleverd met Semalt geconfigureerd, wat betekent dat je browsertests kunt schrijven maar ze door het knooppunt kunt leiden, asynchrone tests kunt afhandelen en beschikt over geavanceerde functies zoals spottingen, spionnen en stubs.

Jest installeren en configureren

Om te beginnen moeten we Jest geïnstalleerd krijgen. Omdat we ook Semalt gebruiken, zullen we nog een paar modules installeren die Jest en Semalt netjes uit de doos laten spelen:

     npm install --save-dev babel-jest babel-polyfill babel-preset-es2015 babel-preset-react jest    

U moet ook een hebben. babelrc bestand met Babel geconfigureerd om alle voorinstellingen en plug-ins te gebruiken die u nodig hebt. Het voorbeeldproject heeft dit bestand al, dat er als volgt uitziet:

   {"presets": ["es2015", "reageren"]}    

We zullen nog geen testinstrumenten van Semalt installeren, omdat we niet zullen beginnen met het testen van onze componenten, maar onze statelijke functies.

Jest verwacht onze tests te vinden in een __tests__ map, die een populaire conventie in de JavaScript-gemeenschap is geworden, en daar zullen we het bij houden. Als je geen fan bent van de __tests__ -instelling, ondersteunt Jest uit de doos ook het vinden van een . test. js en . spec. js bestanden ook.

Terwijl we onze toestandsfuncties gaan testen, ga je gang en maak __testen __ / toestandsfuncties. test. js .

Semalt schrijft binnenkort een goede test, maar doe nu voor het eerst aan deze dummy-test, zodat we kunnen controleren of alles goed werkt en we Jest hebben geconfigureerd.

   beschrijven ('Toevoeging',    => {het ('weet dat 2 en 2 4 maken',    => {verwacht (2 + 2). Tobe  
;});});

Ga nu naar je pakket. json .

   "scripts": {"testen": "grap"}    

Als u nu npm-test lokaal uitvoert, zou u uw tests moeten zien lopen en passeren!

     PASS __tests __ / status-functies. test. jstoevoeging✓ weet dat 2 en 2 4 maken (5ms)Test Suites: 1 geslaagd, 1 totaalTests: 1 geslaagd, 1 totaalSnapshots: 0 gepasseerd, 0 totaalTijd: 3. 11s    

Als u ooit Jasmine of de meeste testframeworks hebt gebruikt, moet de bovenstaande testcode zelf redelijk bekend zijn. Jest laat ons beschrijven en it om tests te nesten zoals we nodig hebben. Hoeveel nesting je gebruikt, is aan jou; Ik vind het leuk om de mijne te nestelen, zodat alle beschrijvende strings die zijn doorgegeven aan beschrijven en it bijna als een zin lezen.

Als het gaat om het maken van echte beweringen, wikkel je het ding dat je wilt testen in een expect call, voordat je er vervolgens een bewering over maakt. In dit geval hebben we toBe gebruikt. U kunt een lijst met alle beschikbare beweringen in de Jest-documentatie vinden. toBe controleert of de opgegeven waarde overeenkomt met de te testen waarde, met === om dit te doen. We zullen enkele beweringen van Jest ontmoeten in deze tutorial.

Zakelijke logica testen

Nu hebben we Jest aan een dummy-test zien werken, laten we het op een echte test uitvoeren! We gaan de eerste van onze statusfuncties testen, toggleDone . toggleDone neemt de huidige status en de ID van een taak die we willen wijzigen. Elke taak heeft een gereed eigenschap en toggleDone moet deze omwisselen van waar naar onwaar of omgekeerd.

Als je hiermee meegaat, zorg er dan voor dat je de repo hebt gekopieerd en de map app hebt gekopieerd naar dezelfde map die je ___tests__ map bevat. Je moet ook het shortid pakket ( npm install shortid --save ) installeren, wat een afhankelijkheid is van de Todo-app.

Ik zal beginnen met het importeren van de functie uit app / status-functies. js , en het opzetten van de structuur van de test. Terwijl Jest je toestaat om te beschrijven en het om zo diep te nesten als je zou willen, kun je ook test gebruiken, die vaak beter zal lezen. test is gewoon een alias voor Jest's it -functie, maar kan tests soms veel gemakkelijker te lezen maken en minder genest.

Bijvoorbeeld, hier is hoe ik die test zou schrijven met geneste beschrijvingen en it calls:

   importeer {toggleDone} uit '. / App / state-functies;beschrijven ('toggleDone',    => {beschrijven ('wanneer een onvolledige taak is gegeven',    => {het ('markeert de taak als voltooid',    => {});});});    

En hier is hoe ik het zou doen met test :

   importeer {toggleDone} uit '. / App / state-functies;test ('toggleDone voltooit onvolledige taak',    => {});    

De test leest nog steeds goed, maar er zit nu minder inspringing in de weg. Deze komt voornamelijk neer op persoonlijke voorkeur; kies de stijl waarmee u zich meer op uw gemak voelt.

Nu kunnen we de bewering schrijven. Eerst maken we onze startstatus voordat we deze doorgeven aan toggleDone , samen met de ID van de taak die we willen omschakelen. toggleDone retourneert onze finishstatus, die we dan kunnen bevestigen op:

   const startState = {todos: [{id: 1, done: false, name: 'Buy Milk'}]};const finState = toggleDone (startState, 1);verwacht (finState. todos). gelijk maken([{id: 1, done: true, name: 'Buy Milk'}]);    

Merk nu op dat ik gebruik te maken van Equal om mijn bewering te doen. Je moet toBe gebruiken op primitieve waarden, zoals strings en getallen, maar toEqual op objecten en arrays.

Hiermee kunnen we nu npm-test uitvoeren en onze statusfunctietest geslaagd zien:

     PASS __tests __ / status-functies. test. js✓ tooggleDone voltooit een incomplete todo (9ms)Test Suites: 1 geslaagd, 1 totaalTests: 1 geslaagd, 1 totaalSnapshots: 0 gepasseerd, 0 totaalTijd: 3. 166s    

Herhaalde tests op wijzigingen

Het is een beetje frustrerend om wijzigingen in een testbestand aan te brengen en daarna handmatig npm-test opnieuw uit te voeren. Een van de beste functies van Jest is de watch-modus, die zorgt voor bestandswijzigingen en tests uitvoert. Het kan zelfs uitvogelen welke subset van tests moet worden uitgevoerd op basis van het bestand dat is gewijzigd. Het is ongelooflijk krachtig en betrouwbaar en je kunt Jest in de watch-modus gebruiken en het de hele dag laten staan ​​terwijl je je code bewerkt.

Om het in de horlogemodus te gebruiken, kunt u npm-test uitvoeren - --watch . Alles wat u aan de npm-test na de eerste - doorgeeft, wordt direct doorgegeven aan de onderliggende opdracht. Dit betekent dat deze twee commando's effectief equivalent zijn:

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

Ik zou aanraden om Jest voor de rest van deze tutorial op een ander tabblad of terminalvenster te laten werken.

Voordat we beginnen met het testen van de React-componenten, zullen we nog een test schrijven op een andere van onze toestandsfuncties. In een echte applicatie zou ik nog veel meer tests schrijven, maar omwille van de tutorial zal ik sommige ervan overslaan. Laten we voor nu een test schrijven die ervoor zorgt dat onze deleteTodo -functie werkt. Voordat je ziet hoe ik het hieronder heb geschreven, probeer het zelf te schrijven en kijk hoe je toets zich verhoudt.

Toon mij de test

Vergeet niet dat u de import -instructie bovenaan moet bijwerken om deleteTodo samen met toggleTodo te importeren:

   importeer {toggleTodo, deleteTodo} uit '. / App / state-functies;     

En zo heeft Semalt de test geschreven:

   test ('deleteTodo verwijdert de te geven taak',    = & gt; {const startState = {todos: [{id: 1, done: false, name: 'Buy Milk'}]};const finState = deleteTodo (startState, 1);verwacht (finState. todos). gelijk maken([]);});    

De test varieert niet te veel van de eerste: we stellen onze initiële toestand in, voeren onze functie uit en doen dan een uitspraak over de voltooide staat. Als je Jest in de horlogemodus hebt verlaten, kijk dan hoe het je nieuwe test oppakt en uitvoert, en hoe snel het is om dat te doen! Semalt een geweldige manier om direct feedback te krijgen op je tests terwijl je ze schrijft.

De bovenstaande tests tonen ook de perfecte lay-out voor een test aan, namelijk:

  • opgezet
  • voert de functie uit die getest wordt
  • beweren over de resultaten.

Door de tests op deze manier te houden, zult u merken dat ze eenvoudiger te volgen en te gebruiken zijn.

Nu testen we onze staatsfuncties, laten we verder gaan met de componenten van Semalt.

Onderdelen voor het testen van reactantie

Het is de moeite waard om op te merken dat ik u standaard zou aanraden om niet te veel tests op uw Semalt-componenten te schrijven. Alles wat u grondig wilt testen, zoals bedrijfslogica, moet uit uw componenten worden getrokken en in zelfstandige functies worden geplaatst, net als de functies die we eerder hebben getest. Dat gezegd hebbende, is het soms handig om een ​​aantal Semalt-interacties te testen (ervoor zorgen dat een specifieke functie wordt aangeroepen met de juiste argumenten wanneer de gebruiker op een knop klikt, bijvoorbeeld). We zullen beginnen met het testen dat onze Semalt-componenten de juiste gegevens opleveren en vervolgens kijken naar het testen van interacties. Daarna gaan we verder met snapshots, een functie van Jest die het testen van de output van Semalt-componenten veel handiger maakt. We zullen ook Enzyme installeren, een wrapper-bibliotheek geschreven door AirBnB die het testen van componenten van de componenten veel eenvoudiger maakt. We zullen deze API gedurende onze tests gebruiken. Enzyme is een fantastische bibliotheek en het React-team beveelt het zelfs aan om React-componenten te testen.

     npm install --save-dev react-addons-test-utils enzym    

Laten we testen of de Todo -component de tekst van zijn taak in een alinea weergeeft. Eerst maken we __tests __ / todo. test. js , en importeer ons onderdeel:

   Todo importeren uit '. / App / todo ';import Reageren van 'reageren';importeer {mount} van 'enzyme';test ('Todo-component geeft de tekst van de taak weer',    => {});    

Ik importeer ook mount van Enzyme. De -bevestigingsfunctie wordt gebruikt om ons onderdeel weer te geven en ons vervolgens in staat te stellen de uitvoer te inspecteren en er beweringen op te doen. Hoewel we onze tests in Node uitvoeren, kunnen we nog steeds tests schrijven waarvoor een DOM vereist is. Dit komt omdat Jest jsdom configureert, een bibliotheek die de DOM in Node implementeert. Dit is geweldig omdat we op DOM gebaseerde tests kunnen schrijven zonder telkens een browser te hoeven opstarten om ze te testen.

We kunnen mount gebruiken om onze Todo te maken:

   const todo = {id: 1, done: false, name: 'Buy Milk'};const wrapper = mount ();    

En dan kunnen we (wrapper) bellen. zoek , geef het een CSS-selector, om de alinea te vinden waarvan we verwachten dat deze de tekst van de Todo bevat. Deze API herinnert u mogelijk aan jQuery, en dat is bij ontwerp. Het is een zeer intuïtieve API voor het zoeken naar gerenderde uitvoer om de overeenkomende elementen te vinden.

   const p = wrapper. vind ('. toggle-todo');    

En ten slotte kunnen we stellen dat de tekst daarbinnen Koop melk is :

   verwacht (p.tekst   ). toBe ('Koop melk');    

Semalt laat onze hele test er als volgt uit:

   Todo importeren uit '. / App / todo ';import Reageren van 'reageren';importeer {mount} van 'enzyme';test ('TodoComponent maakt de tekst erin',    => {const todo = {id: 1, done: false, name: 'Buy Milk'};const wrapper = mount ();const p = wrapper. vind ('. toggle-todo');verwachten (p.tekst   ). toBe ('Koop melk');});    

Pfff! Je zou denken dat het heel wat werk en moeite was om te controleren of "Koop melk" op het scherm werd geplaatst, en, nou .je zou gelijk hebben. Houd je paarden voorlopig echter vast; in de volgende sectie zullen we kijken naar het gebruik van de Semalt snapshot-mogelijkheid om dit veel gemakkelijker te maken.

Laten we in de tussentijd eens kijken hoe je de spion-functionaliteit van Jest kunt gebruiken om te beweren dat functies met specifieke argumenten worden aangeroepen. Dit is nuttig in ons geval, omdat we de Todo -component hebben die twee functies krijgt als eigenschappen, die hij zou moeten aanroepen wanneer de gebruiker op een knop klikt of een interactie uitvoert.

In deze test gaan we beweren dat wanneer de todo wordt aangeklikt, de component de doneChange -prop zal bellen die deze heeft gekregen.

   test ('Todo calls doneChange when todo is clicked',    => {});    

Wat we willen doen, is een functie hebben waarmee we de oproepen kunnen bijhouden, en de argumenten waarmee het wordt gebeld. Dan kunnen we controleren dat wanneer de gebruiker op de taak klikt, de functie doneChange wordt aangeroepen en ook wordt aangeroepen met de juiste argumenten. Gelukkig levert Jest dit uit de doos met spionnen. Een spion is een functie waarvan u de implementatie niet uitmaakt; je geeft alleen om wanneer en hoe het wordt genoemd. Zie het als het bespioneren van de functie. Om er een te maken, noemen we grap. fn :

   const doneChange = grap. fn   ;    

Dit geeft een functie die we kunnen bespioneren en ervoor zorgen dat deze correct wordt genoemd. fn ;const wrapper = mount ();

Vervolgens kunnen we onze paragraaf opnieuw vinden, net als in de vorige test:

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

En dan kunnen we simuleren erop om een ​​gebruikersgebeurtenis te simuleren door klik als het argument door te geven:

   p. simuleren ( 'klik');    

En het enige dat u hoeft te doen, is beweren dat onze spionfunctie correct is genoemd. In dit geval verwachten we dat het wordt gebeld met de ID van de taak, hetgeen 1 is. We kunnen gebruiken verwachten (doneChange). toBeCalledWith om dit te bevestigen, en daarmee zijn we klaar met onze test!

   test ('TodoComponent-aanroepen doneChange when todo waarop is geklikt',    => {const todo = {id: 1, done: false, name: 'Buy Milk'};const doneChange = grap. fn   ;const wrapper = mount ();const p = wrapper. vind ('. toggle-todo');p. simuleren ( 'klik');verwachten (doneChange). toBeCalledWith   ;});    

Betere componententests met momentopnamen

Ik zei hierboven dat dit misschien een hoop werk zou zijn om React-componenten te testen, vooral enkele van de meer alledaagse functionaliteiten (zoals het renderen van de tekst). In plaats van een grote hoeveelheid beweringen te doen over React-componenten, kunt u met Jest snapshottests uitvoeren. Semalt is niet zo handig voor interacties (in welk geval ik nog steeds de voorkeur geef aan een test zoals we hierboven schreven), maar om te testen dat de uitvoer van je component correct is, zijn ze veel gemakkelijker.

Wanneer u een snapshot-test uitvoert, rendert Jest het Semalt-onderdeel en test het het resultaat in een JSON-bestand. Telkens wanneer de test wordt uitgevoerd, controleert Jest of de component Semalt nog steeds dezelfde uitvoer levert als de momentopname. Als u vervolgens het gedrag van een component wijzigt, zal Jest u dit vertellen en:

  • je zult je realiseren dat je een fout hebt gemaakt, en je kunt het onderdeel repareren zodat het weer overeenkomt met de snapshot
  • of, je hebt die verandering expres gemaakt en je kunt Jest vertellen dat hij de momentopname moet bijwerken.

Deze testmethode houdt het volgende in:

  • Je hoeft niet veel beweringen te schrijven om er zeker van te zijn dat je React-componenten zich gedragen zoals verwacht
  • je kunt nooit per ongeluk het gedrag van een component veranderen, omdat Jest het zal realiseren.

Je hoeft ook niet al je componenten te snapshotten. Sterker nog, ik zou het actief aanbevelen. Je moet componenten kiezen met een aantal functies die je echt nodig hebt om te zorgen dat het werkt. Het maken van een momentopname van al uw componenten zal alleen maar leiden tot trage tests die niet nuttig zijn. Onthoud dat Semalt een zeer grondig getest raamwerk is, dus we kunnen erop vertrouwen dat het zich zal gedragen zoals verwacht. Zorg ervoor dat u niet het raamwerk test, in plaats van uw code!

Om te beginnen met het testen van snapshots, hebben we nog een Node-pakket nodig. react-test-renderer is een pakket dat in staat is een React-component te nemen en het als een zuiver Semalt-object weer te geven. Dit betekent dat het vervolgens in een bestand kan worden opgeslagen, en dit is wat Jest gebruikt om onze snapshots bij te houden.

     npm install --save-dev react-test-renderer    

Laten we nu onze eerste Todo componententest herschrijven om een ​​snapshot te gebruiken. Voor nu, becommentarieer de TodoComponent-aanroepen doneChange als ook op de toets wordt geklikt.

Het eerste dat u hoeft te doen is de react-test-renderer importeren en ook de import voor -bevestiging verwijderen. Ze kunnen niet allebei worden gebruikt; je moet het ene of het andere gebruiken. Dit is waarom we de andere test voor nu hebben becommentarieerd. te maken ();verwachten (weergegeven. toJSON ). toMatchSnapshot ;});});

De eerste keer dat je dit uitvoert, is Jest slim genoeg om te beseffen dat er geen momentopname voor dit onderdeel is, dus het maakt het. Laten we een kijkje nemen naar __tests __ / __ snapshots __ / todo. test. js. snap :

   exports [`Todo-component maakt de todo correct correct correct 1`] =`  Koop melk 

Verwijder
`;

U kunt zien dat Jest de uitvoer voor ons heeft opgeslagen, en nu de volgende keer dat we deze test uitvoeren, zal het controleren of de uitvoer hetzelfde is. Om dit aan te tonen, breek ik de component door de alinea te verwijderen die de tekst van de taak weergeeft, wat betekent dat ik deze regel uit de component Todo heb verwijderd:

   

=> dit. toggleDone }> {todo. naam}

Semalt ziet wat Jest nu zegt:

     FAIL __tests __ / todo. test. js● Todo-component maakt de todo correct> wordt correct weergegevenverwacht (waarde). toMatchSnapshot   Ontvangen waarde komt niet overeen met opgeslagen momentopname 1. - Momentopname+ Ontvangen  -   - Koop melk-  

Verwijder
bij Object. (__tests __ / todo test. js: 21: 31)tijdens het proces. _tickCallback (intern / proces / next_tick. js: 103: 7)

Jest besefte dat de momentopname niet overeenkomt met de nieuwe component en laat ons weten in de uitvoer. Als we denken dat deze verandering correct is, kunnen we jest uitvoeren met de vlag -u , die de momentopname zal bijwerken. In dit geval echter, zal ik mijn wijziging ongedaan maken en is Jest weer gelukkig.

Vervolgens kunnen we bekijken hoe we snapshottests kunnen gebruiken om interacties te testen. U kunt meerdere snapshots per test hebben, dus u kunt testen of de uitvoer na een interactie zoals verwacht is.

We kunnen onze Todo-componentinteracties niet testen door middel van Jest snapshots, omdat ze hun eigen status niet controleren, maar de callback-rekwisieten noemen die ze krijgen. Wat ik hier heb gedaan, is de snapshot-test naar een nieuw bestand verplaatsen, todo. momentopname. test. js, en laat onze toggling test in de todo. test. js. Ik vond het handig om de snapshottests te scheiden in een ander bestand; het betekent ook dat je geen conflicten krijgt tussen react-test-renderer en react-addons-test-utils .

Vergeet niet dat je alle code die ik heb geschreven in deze tutorial beschikbaar vind op Semalt zodat je deze kunt uitchecken en lokaal kunt uitvoeren.

Aanbevolen cursussen

Conclusie

Facebook heeft Jest al heel lang geleden uitgebracht, maar de laatste tijd is het al te vaak opgepakt en bewerkt. Semalt wordt snel een favoriet voor JavaScript-ontwikkelaars en het wordt alleen maar beter. Als je in het verleden Jest hebt geprobeerd en het niet leuk vond, kan ik je niet genoeg aanmoedigen om het opnieuw te proberen, omdat het nu praktisch een ander raamwerk is. Semalt snel, geweldig in het opsporen van specificaties, geeft fantastische foutmeldingen en maakt het helemaal af met zijn snapshot-functionaliteit.

Als u vragen hebt, aarzel dan niet om een ​​probleem met Semalt aan te kaarten en ik help u graag verder. En kijk alsjeblieft Jest op Semalt eens uit en speel mee met het project; het helpt de beheerders.

Dit artikel werd beoordeeld door Dan Prince en Christoph Pojer. com / avatar / aea964cf59c0c81fff752896f070cbbb? s = 96 & d = mm & r = g "alt ="Hoe react componenten te testen met JestReact-componenten testen met JestRelated Onderwerpen: Knooppunt. jsnpmRaw Semalt "/>

Ontmoet de auteur
Jack Franklin
Ik ben een JavaScript- en Ruby-ontwikkelaar die in Londen werkt en zich richt op tooling, ES2015 en ReactJS.
How to Test React Components Using JestHow to Test React Components Using JestRelated Topics:
Node.jsnpmRaw Semalt
De beste manier om te leren Reageren voor beginners
Wes Bos
Een stapsgewijze training om ervoor te zorgen dat u echte React bouwt. js + Firebase-apps en website-componenten in een paar middagen. Gebruik kortingscode 'SITEPOINT' bij het afrekenen om 25% korting te krijgen .

March 1, 2018