Att skriva prov kan vara tråkigt och repetitivt. Du kanske känner att du slösar bort dyrbar tid som du hellre vill använda för att arbeta med funktioner. Men om du vill skicka ansökningar som du är säker på bör du skriva tester.
Testning låter dig fånga misstag och buggar som du annars skulle kunna skicka till användarna. Det förbättrar därför användarupplevelsen av din applikation och sparar dig från att behöva felsöka produktionskod.
Du kan enkelt skriva tester i React med hjälp av Jest och React Testing Library.
Vad ska du testa i React?
Att bestämma sig för vad man ska testa kan vara svårt. Även om tester är bra, bör du inte testa varje rad i din React-applikation. Om du gör det kommer du att få spröda tester som bryter med den minsta förändringen i din app.
Istället bör du bara testa slutanvändarimplementeringen. Det innebär att testa hur slutanvändaren kommer att använda din applikation istället för att testa appens inre funktion.
Se dessutom till att du testar de mest använda komponenterna i din applikation, som målsidan eller inloggningskomponenten. Testa också de viktigaste funktionerna i din applikation. Det kan till exempel vara funktioner som ger pengar, som kundvagnsfunktionen.
När du bestämmer dig för vad du ska testa är en sak att tänka på att aldrig testa funktionalitet som React hanterar själv. Till exempel, istället för att testa rekvisitas giltighet, kan du använda React PropTypes.
Testa en knappkomponent
Kom ihåg att du bara ska testa slutanvändarimplementeringen av en komponent och inte dess interna funktion. För en knappkomponent innebär detta att verifiera att den renderas utan att krascha och visas korrekt.
Skapa en ny fil i src mapp som heter Button.js och lägg till följande kod.
fungeraKnapp({värde}) {
lämna tillbaka (
<knapp>{värde}</button>
)
}
exporterastandard Knapp
Button.js accepterar en prop som kallas värde och använder den som knappvärde.
Skriver ditt första test
A skapa-reagera-app-applikation kommer förinstallerat med Jest och React Testing Library. Jest är ett lättviktigt testbibliotek med inbyggda hån- och påståendefunktioner. Det fungerar med många JavaScript-ramverk. React Testing Library, å andra sidan, tillhandahåller funktioner som hjälper dig att testa hur användare interagerar med komponenter.
Skapa en ny fil som heter Button.test.js i src-mappen. Som standard identifierar Jest filer med suffix med .test.js som testfiler och kör dem automatiskt. Ett annat alternativ är att lägga till dina testfiler i en mapp som heter __tester__.
Lägg till följande kod i Button.test.js för att skapa det första testet.
importera { framställa } från '@testing-library/react';
importera Knapp från '../Knapp';
beskriva('Knappkomponent', () => {
testa('Återger knappkomponenten utan att krascha', () => {
framställa(<Knapp />);
});
})
Det här testet definierar först vad testet handlar om med hjälp av describe-blocket från Jest. Detta block är användbart för att gruppera relaterade tester. Här grupperar du testerna för Button-komponenten.
Inne i beskriv-blocket har du det första testet i testblocket. Detta block accepterar en sträng som beskriver vad testet ska göra och en återuppringningsfunktion som exekverar förväntningen.
I det här exemplet bör testet återge Button-komponenten utan att krascha. Renderingsmetoden från React Testing Library utför själva testet. Den kontrollerar om Button-komponenten återges korrekt. Om det gör det går testet godkänt, annars misslyckas det.
Använda roller för att hitta knappen
Ibland vill man kolla om elementet var monterat. Skärmmetoden har en getByRole() funktion som du kan använda för att ta ett element från DOM.
screen.getByRole('knapp')
Du kan sedan använda elementet du har greppat för att utföra tester som att kontrollera om det finns i dokumentet eller renderats korrekt.
getByRole() är en bland många av de frågor du kan använda för att välja element i en komponent. Kolla in andra typer av frågor i The Reager Testing Library's "Vilken fråga ska jag använda" Guide. Också andra än "knapp"-rollen, de flesta semantiska HTML-element har implicita roller som du kan använda för att utföra dina frågor. Hitta listan över roller från MDN-dokument.
Lägg till följande i testblocket för att verifiera komponentrenderingen.
testa('Återger knappen utan att krascha', () => {
framställa(<Knappvärde="Bli Medlem" />);
förvänta (screen.getByRole('knapp')).toBeInTheDocument()
});
ToBeInTheDocument()-matcharen kontrollerar om knappelementet finns i dokumentet.
Förvänta dig att knappen återges korrekt
Knappkomponenten accepterar ett prop-värde och visar det. För att det ska renderas korrekt måste värdet som visas vara detsamma som det du skickade in.
Skapa ett nytt testblock och lägg till följande kod.
testa('Återger knappen korrekt', () => {
framställa(<Knappvärde="Logga in" />);
förvänta (screen.getByRole('knapp')).toHaveTextContent("Logga in")
})
Observera att du inte behöver göra rensningar efter tester när du använder React Testing Library. I tidigare versioner skulle du behöva göra rensningen manuellt så här:
efter varje (städning)
Nu avmonterar testbiblioteket komponenter automatiskt efter varje rendering.
Skapa ögonblicksbildstester
Hittills har du testat beteendet hos Button-komponenten. Skriv ögonblicksbildstester för att testa om komponentens utgång förblir densamma.
Snapshot-test jämför den aktuella utgången med en lagrad utgång från komponenten. Om du till exempel ändrar stilen på en knappkomponent kommer ögonblicksbildstestet att meddela dig. Du kan antingen uppdatera ögonblicksbilden så att den matchar den ändrade komponenten eller ångra stiländringarna.
Snapshot-tester är mycket användbara när du vill säkerställa att ditt användargränssnitt inte ändras oväntat.
Snapshot-testning skiljer sig från enhetstester eftersom du måste ha redan fungerande kod för att skapa ögonblicksbilden.
Du kommer att använda renderingsmetoden från paketet react-test-renderer npm. Så, kör följande kod för att installera den.
npm Installera reagera-testa-renderare
I Button.test.js skriver du ögonblicksbildstestet enligt följande:
testa('Matchar ögonblicksbild', () => {
const tree = renderer.create(<Knappvärde="Logga in" />).toJSON();
förvänta(träd).toMatchSnapshot();
})
Det finns inga befintliga ögonblicksbilder för Button-komponenten, så att köra det här testet skapar en ögonblicksbildsfil bredvid testfilen:
Knapp
└─── __tester__
│ │ Knapp.tester.js
│ └─── __snapshot__
│ │ Knapp.testa.js.knäppa
│
└─── Knapp.js
Nu, när du kör nästa test, kommer React att jämföra den nya ögonblicksbilden som den genererar med den lagrade.
Skriv tester för de mest använda komponenterna
Den här handledningen lärde dig hur man skriver DOM- och ögonblicksbildstester i React genom att testa en Button-komponent. Att skriva tester för alla komponenter du skapar kan vara tråkigt. Dessa tester sparar dig dock den tid som du skulle ha spenderat på att felsöka redan distribuerad kod.
Du behöver inte uppnå 100 procent testtäckning men se till att du skriver tester för dina mest använda och viktigaste komponenter.
