Het schrijven van tests kan vervelend en repetitief zijn. Je hebt misschien het gevoel dat je kostbare tijd verspilt die je liever zou gebruiken om aan functies te werken. Als u echter toepassingen wilt verzenden waar u zeker van bent, moet u tests schrijven.

Door te testen kunt u fouten en bugs opsporen die u anders naar gebruikers zou kunnen verzenden. Het verbetert daarom de gebruikerservaring van uw toepassing en voorkomt dat u de productiecode moet debuggen.

Je kunt eenvoudig tests schrijven in React met behulp van Jest en de React Testing Library.

Wat moet u in Reageren testen?

Beslissen wat te testen kan moeilijk zijn. Hoewel tests geweldig zijn, zou u niet elke regel in uw React-toepassing moeten testen. Als u dit doet, krijgt u broze tests die breken bij de minste verandering in uw app.

In plaats daarvan moet u alleen de implementatie van de eindgebruiker testen. Dit betekent testen hoe de eindgebruiker uw applicatie zal gebruiken in plaats van de interne werking van uw app te testen.

Zorg er bovendien voor dat u de meest gebruikte componenten in uw toepassing test, zoals de bestemmingspagina of de inlogcomponent. Test ook de belangrijkste functies in uw toepassing. Dit kunnen bijvoorbeeld functies zijn die geld opleveren, zoals de winkelwagenfunctie.

Bij het beslissen wat te testen, is een ding om in gedachten te houden nooit om functionaliteit te testen die React zelf afhandelt. In plaats van bijvoorbeeld de geldigheid van rekwisieten te testen, kun je React PropTypes gebruiken.

Een knopcomponent testen

Onthoud dat u alleen de implementatie van een onderdeel door de eindgebruiker moet testen en niet de interne werking ervan. Voor een knopcomponent betekent dit dat wordt gecontroleerd of deze wordt weergegeven zonder te crashen en correct wordt weergegeven.

Maak een nieuw bestand in de src map genaamd Button.js en voeg de volgende code toe.

functieKnop({waarde}) {
opbrengst (
<knop>{waarde}</button>
 )
}
exporterenstandaard Knop

Button.js accepteert een prop genaamd waarde en gebruikt deze als de knopwaarde.

Je eerste test schrijven

EEN app maken-reageren wordt vooraf geïnstalleerd met Jest en de React Testing Library. Jest is een lichtgewicht testbibliotheek met ingebouwde mocking- en assertion-functies. Het werkt met velen JavaScript-frameworks. De React Testing Library daarentegen biedt functies waarmee u kunt testen hoe gebruikers omgaan met componenten.

Maak een nieuw bestand met de naam Knop.test.js in de src-map. Standaard identificeert Jest bestanden met het achtervoegsel .test.js als testbestanden en voert ze automatisch uit. Een andere optie is om uw testbestanden toe te voegen aan een map met de naam __testen__.

Voeg de volgende code toe aan Button.test.js om de eerste test te maken.

importeren { veroorzaken } van '@test-bibliotheek/reageren';
importeren Knop van '../Knop';
beschrijven('Knop component', () => { 
 testen('Rendert de knopcomponent zonder te crashen', () => {
 veroorzaken(<Knop />);
 }); 
})

Deze test definieert eerst waar de test over gaat met behulp van het beschrijvingsblok van Jest. Dit blok is handig voor het groeperen van gerelateerde tests. Hier groepeert u de tests voor de component Button.

Binnen het beschrijfblok heb je de eerste test in het testblok. Dit blok accepteert een tekenreeks die beschrijft wat de test moet doen en een callback-functie die de verwachting uitvoert.

In dit voorbeeld zou de test de component Button moeten renderen zonder te crashen. De rendermethode uit de React Testing Library voert de eigenlijke test uit. Het controleert of de component Button correct wordt weergegeven. Als dat zo is, slaagt de test, anders mislukt het.

Rollen gebruiken om de knop te vinden

Soms wil je controleren of het element is gemonteerd. De methode screen heeft een functie getByRole() die u kunt gebruiken om een ​​element uit de DOM te halen.

screen.getByRole('knop')

U kunt vervolgens het element dat u hebt gepakt gebruiken om tests uit te voeren, zoals controleren of het in het document bestaat of correct is weergegeven.

getByRole() is een van de vele query's die u kunt gebruiken om elementen in een component te selecteren. Bekijk andere soorten zoekopdrachten in The Reageren Testbibliotheek's Gids "Welke zoekopdracht moet ik gebruiken". Ook anders dan de "knop" -rol, de meeste semantische HTML-elementen hebben impliciete rollen die u kunt gebruiken om uw query's uit te voeren. Vind de lijst met rollen van MDN-documenten.

Voeg het volgende toe aan het testblok om de componentweergave te verifiëren.

testen('Knop rendert zonder te crashen', () => {
 veroorzaken(<Knop waarde="Aanmelden" />);
 verwachten (screen.getByRole('knop')).toBeInTheDocument()
});

De matcher toBeInTheDocument() controleert of het knopelement in het document bestaat.

Verwacht dat de knop correct wordt weergegeven

De component Button accepteert een propwaarde en geeft deze weer. Om correct te worden weergegeven, moet de waarde die wordt weergegeven dezelfde zijn als de waarde die u hebt opgegeven.

Maak een nieuw testblok en voeg de volgende code toe.

testen('Rendert knop correct', () => {
 veroorzaken(<Knop waarde="Log in" />);
 verwachten (screen.getByRole('knop')).toHaveTextContent("Log in")
})

Houd er rekening mee dat u na tests niet hoeft op te ruimen wanneer u de React Testing Library gebruikt. In eerdere versies moest u de opschoning als volgt handmatig uitvoeren:

na elk (opruimen)

Nu ontkoppelt de testbibliotheek componenten automatisch na elke render.

Momentopnametests maken

Tot nu toe hebt u het gedrag van de component Button getest. Schrijf snapshot-tests om te testen of de uitvoer van het onderdeel hetzelfde blijft.

Momentopnametests vergelijken de huidige uitvoer met een opgeslagen uitvoer van het onderdeel. Als u bijvoorbeeld de stijl van een Button-component wijzigt, zal de snapshot-test u hiervan op de hoogte stellen. U kunt de momentopname bijwerken zodat deze overeenkomt met de gewijzigde component of de stijlwijzigingen ongedaan maken.

Snapshot-tests zijn erg handig wanneer u ervoor wilt zorgen dat uw gebruikersinterface niet onverwacht verandert.

Snapshot-testen is anders dan unit-tests, omdat u al werkende code moet hebben om de snapshot te maken.

U gebruikt de renderermethode uit het react-test-renderer npm-pakket. Voer dus de volgende code uit om deze te installeren.

npm installeren Reageer-testen-renderer

Schrijf in Button.test.js de snapshot-test als volgt:

testen('Komt overeen met momentopname', () => {
 const tree = renderer.create(<Knop waarde="Log in" />).naarJSON();
verwachten(boom).toMatchMomentopname();
})

Er zijn geen bestaande snapshots voor de component Button, dus als u deze test uitvoert, wordt er naast het testbestand een snapshotbestand gemaakt:

Knop
└─── __testen__
│ │ Knop.tests.js
│ └─── __snapshot__
│ │ Knop.testen.js.snap
│ 
└─── Knop.js

Wanneer u nu de volgende test uitvoert, vergelijkt React de nieuwe snapshot die het genereert met de opgeslagen.

Schrijftests voor de meest gebruikte componenten

Deze tutorial heeft je geleerd hoe je DOM- en snapshot-tests schrijft in React door een Button-component te testen. Het schrijven van tests voor alle componenten die u maakt, kan vervelend zijn. Deze tests besparen u echter de tijd die u zou hebben besteed aan het debuggen van reeds geïmplementeerde code.

U hoeft geen testdekking van 100 procent te behalen, maar zorg ervoor dat u tests schrijft voor uw meest gebruikte en belangrijkste componenten.