At skrive test kan være kedeligt og gentagne. Du kan føle, at du spilder kostbar tid, du hellere vil bruge på at arbejde med funktioner. Men hvis du vil sende ansøgninger, som du er sikker på, bør du skrive test.

Test giver dig mulighed for at fange fejl og fejl, som du ellers kunne ende med at sende til brugere. Det forbedrer derfor brugeroplevelsen af ​​din applikation og sparer dig for at skulle fejlfinde produktionskode.

Du kan nemt skrive test i React ved hjælp af Jest og React Testing Library.

Hvad skal du teste i React?

Det kan være svært at beslutte, hvad man skal teste. Selvom test er fantastisk, bør du ikke teste hver linje i din React-applikation. Hvis du gør det, vil du efterlade sprøde tests, der bryder med den mindste ændring i din app.

I stedet bør du kun teste slutbrugerimplementeringen. Det betyder at teste, hvordan slutbrugeren vil bruge din applikation i stedet for at teste den indre funktion af din app.

Sørg desuden for, at du tester de mest brugte komponenter i din applikation, såsom landingssiden eller login-komponenten. Test også de vigtigste funktioner i din applikation. Det kan f.eks. være funktioner, der indbringer penge, såsom indkøbskurvfunktionen.

Når man beslutter sig for, hvad man skal teste, er én ting, man skal huske på, aldrig at teste funktionalitet, som React selv håndterer. For eksempel, i stedet for at teste gyldigheden af ​​rekvisitter, kan du bruge React PropTypes.

Test af en knapkomponent

Husk, at du kun bør teste slutbrugerimplementeringen af ​​en komponent og ikke dens interne funktion. For en knapkomponent betyder det at verificere, at den gengives uden at gå ned og vises korrekt.

Opret en ny fil i src mappe kaldet Button.js og tilføje følgende kode.

fungereKnap({værdi}) {
Vend tilbage (
<knap>{værdi}</button>
 )
}
eksportStandard Knap

Button.js accepterer en prop kaldet værdi og bruger den som knapværdi.

At skrive din første test

EN opret-reager-app-applikation leveres forudinstalleret med Jest og React Testing Library. Jest er et letvægtstestbibliotek med indbyggede mocking- og assertion-funktioner. Det fungerer med mange JavaScript rammer. React Testing Library, på den anden side, indeholder funktioner, der hjælper dig med at teste, hvordan brugere interagerer med komponenter.

Opret en ny fil kaldet Button.test.js i src-mappen. Som standard identificerer Jest filer med suffiks med .test.js som testfiler og kører dem automatisk. En anden mulighed er at tilføje dine testfiler til en mappe kaldet __test__.

Tilføj følgende kode i Button.test.js for at oprette den første test.

importere { render } fra '@test-bibliotek/reager';
importere Knap fra '../Knap';
beskrive('Knap komponent', () => { 
 prøve('Gengiver knapkomponenten uden at gå ned', () => {
 render (<Knap />);
 }); 
})

Denne test definerer først, hvad testen går ud på ved at bruge beskrivelsesblokken leveret af Jest. Denne blok er nyttig til at gruppere relaterede tests. Her grupperer du testene for Button-komponenten.

Inde i beskriv blokken har du den første test i testblokken. Denne blok accepterer en streng, der beskriver, hvad testen skal gøre, og en tilbagekaldsfunktion, der udfører forventningen.

I dette eksempel skal testen gengive Button-komponenten uden at gå ned. Gengivelsesmetoden fra React Testing Library udfører selve testen. Den kontrollerer, om knapkomponenten gengives korrekt. Hvis den gør det, består testen, ellers mislykkes den.

Brug af roller til at finde knappen

Nogle gange vil du tjekke om elementet var monteret. Skærmmetoden har en getByRole() funktion, som du kan bruge til at hente et element fra DOM.

screen.getByRole('knap')

Du kan derefter bruge det element, du har grebet, til at udføre tests som at kontrollere, om det findes i dokumentet eller blev gengivet korrekt.

getByRole() er en blandt mange af de forespørgsler, du kan bruge til at vælge elementer i en komponent. Se andre typer forespørgsler i The React Testing Library's Guide til "Hvilken forespørgsel skal jeg bruge". Også andre end "knap"-rollen, de fleste semantiske HTML-elementer har implicitte roller, du kan bruge til at udføre dine forespørgsler. Find listen over roller fra MDN-dokumenter.

Tilføj følgende til testblokken for at bekræfte komponentgengivelserne.

prøve('Gengiver knap uden at gå ned', () => {
 render (<Knapværdi ="Tilmelde" />);
 forventer (screen.getByRole('knap')).toBeInTheDocument()
});

ToBeInTheDocument()-matcheren kontrollerer, om knapelementet findes i dokumentet.

Forvent, at knappen gengives korrekt

Knapkomponenten accepterer en prop-værdi og viser den. For at den kan gengives korrekt, skal den værdi, den viser, være den samme som den, du sendte ind.

Opret en ny testblok og tilføj følgende kode.

prøve('Gengiver knappen korrekt', () => {
 render (<Knapværdi ="Log på" />);
 forventer (screen.getByRole('knap')).toHaveTextContent("Log på")
})

Bemærk, at du ikke behøver at foretage oprydning efter test, når du bruger React Testing Library. I tidligere versioner skulle du manuelt udføre oprydningen sådan:

efterHver (oprydning)

Nu afmonterer testbiblioteket komponenter automatisk efter hver gengivelse.

Oprettelse af Snapshot-tests

Indtil videre har du testet opførselen af ​​Button-komponenten. Skriv snapshot-tests for at teste, om komponentens output forbliver det samme.

Snapshot-test sammenligner det aktuelle output med et lagret output fra komponenten. Hvis du for eksempel ændrer stilen på en knapkomponent, vil snapshottesten give dig besked. Du kan enten opdatere øjebliksbilledet, så det matcher den ændrede komponent eller fortryde stilændringerne.

Snapshot-tests er meget nyttige, når du vil sikre dig, at din brugergrænseflade ikke ændres uventet.

Snapshot-testning er forskellig fra enhedstests, da du allerede skal have en fungerende kode for at oprette snapshotet.

Du vil bruge renderer-metoden fra react-test-renderer npm-pakken. Så udfør følgende kode for at installere den.

npm installere reagere-prøve-renderer

I Button.test.js skal du skrive snapshot-testen som følger:

prøve('Matcher øjebliksbillede', () => {
 const træ = renderer.create(<Knapværdi ="Log på" />).toJSON();
forventer(træ).toMatchSnapshot();
})

Der er ingen eksisterende snapshots for Button-komponenten, så kørsel af denne test vil oprette en snapshot-fil sammen med testfilen:

Knap
└─── __test__
│ │ Knap.tests.js
│ └─── __snapshot__
│ │ Knap.prøve.js.snap
│ 
└─── Knap.js

Nu, når du kører den næste test, vil React sammenligne det nye snapshot, som det genererer, med det gemte.

Skriv test for de mest brugte komponenter

Denne tutorial lærte dig, hvordan du skriver DOM- og snapshot-tests i React ved at teste en Button-komponent. Det kan være kedeligt at skrive test for alle de komponenter, du opretter. Disse test sparer dig dog for den tid, du ville have brugt på at fejlfinde allerede implementeret kode.

Du behøver ikke at opnå 100 procent testdækning, men sørg for, at du skriver test for dine mest brugte og vigtigste komponenter.