Testen van componenten Best Practices

door React Developers @ Selleo

De meest populaire benadering voor het testen van React-componenten is het gebruik van Mocha + Chai + Enzyme of Jest + Enzyme. In dit artikel beschrijven we onze React componenten testmethoden met Jest + Enzyme die ook van toepassing zijn op Mocha + Chai.

Als u nieuw bent met het testen van React-componenten, moet u ook lezen:

  • create-react-app README-sectie over "Schrijftoetsen"
  • Jest - Aan de slag
  • Enzyme API-documentatie

Tests organisatie

In grotere JavaScript-projecten plaatsen we tests dichtbij de implementatie in de submap __tests__. Gewoonlijk worden tests voor een component gegroepeerd op structuur en wordt er gedrag aan toegevoegd, zoals:

Minimale componententest bevestigt weergegeven component

Minimale componenttests controleren of de component correct wordt aangeduid als rooktest of "Build Verification Testing". Het kan worden gedaan met Enzyme:

of Jest snapshot:

Het laatste genereert __snapshots __ / MainSection.spec.js.snap bestand.

Wijzigingen in snapshots worden lokaal bevestigd via 'u' in de jest-cli en vastgelegd in de git-repository, zodat PR-beoordelaar ze kan zien. U kunt meer lezen over Snapshot-testen

Op dit moment beperken we het gebruik van snapshots tot componentrendering en complexe json (d.w.z. grafiekconfiguraties).

Ok, ik test renders - wat moet ik anders testen?

Je moet niet vergeten dat tests iets zijn dat je moet schrijven en onderhouden. Het schrijven van goede tests vereist evenveel ambacht als het maken van de applicatiecode.

Tests zijn geautomatiseerde kwaliteitsborging en documentatie voor ontwikkelaars. Hoe groter het project en het team, hoe meer gedetailleerde tests je nodig hebt.

Probeer na te denken over de toekomst waarin u terugkeert naar dit onderdeel of het opnieuw aanpast - wat zouden uw verwachtingen van tests zijn?

  • Geïsoleerd - alle interacties met externe services moeten worden bespot
  • Specifiek - als u de kleine functionaliteit wijzigt, wilt u een specifiek testfoutbericht ontvangen
  • Ze beschrijven wat het systeem niet doet, zodat u gemakkelijk kunt refactoren

Laten we enkele werkwijzen doornemen die we nuttig vinden om die doelen te bereiken.

Expliciete setup () in plaats van beforeEach ()

Het voordeel van het gebruik van de expliciete setup () -functie is dat bij elke test duidelijk is hoe de component is geïnitialiseerd. Het setup-object is ook een goede plek om enkele helpfuncties aan te sluiten die met de wrapper werken, d.w.z.

Testgedrag

Testgedrag in de praktijk komt neer op testen of bepaalde ingangen en gesimuleerde gebeurtenissen resulteren in verwachte resultaten, d.w.z.

Je kunt zien hoe setup () het schrijven van die tests heel snel maakt!

Gebruik helperfuncties

Soms moeten we veel vergelijkbare tests schrijven met slechts één ingevoerde variabele gewijzigd. Dit kan worden aangepakt met de helperfunctie die een test genereert:

Het leest veel beslag en is gemakkelijker te onderhouden.

Samenvatting

Praktijken beschreven in dit artikel:

  • zet tests dicht bij de implementatie in de submap __tests__
  • begin altijd met eenvoudige component rendering-test oftewel rooktesten en test dan het gedrag
  • denk aan de toekomst dat u teruggaat naar dit onderdeel of het opnieuw gaat bewerken
  • gebruik expliciete setup () en retourneer hiermee veelgebruikte snelkoppelingsvariabelen
  • gebruik helperfuncties die tests genereren

We hopen dat je dit artikel nuttig vond. U kunt werkende voorbeeldcode vinden op mijn vork van redux todomvc-code op https://github.com/tb/redux/tree/react-testing/examples/todomvc/src/components/__tests__