Å skrive tester kan være kjedelig og repeterende. Du kan føle at du kaster bort dyrebar tid du heller vil bruke til å jobbe med funksjoner. Men hvis du ønsker å sende søknader som du er trygg på, bør du skrive tester.
Testing lar deg fange opp feil og feil som du ellers kan ende opp med å sende til brukere. Det forbedrer derfor brukeropplevelsen av applikasjonen din og sparer deg for å måtte feilsøke produksjonskode.
Du kan enkelt skrive tester i React ved å bruke Jest og React Testing Library.
Hva bør du teste i React?
Det kan være vanskelig å bestemme seg for hva du skal teste. Selv om tester er gode, bør du ikke teste hver linje i React-applikasjonen din. Å gjøre det vil etterlate deg med sprø tester som bryter med den minste endringen i appen din.
I stedet bør du bare teste sluttbrukerimplementeringen. Dette betyr å teste hvordan sluttbrukeren vil bruke applikasjonen din i stedet for å teste den indre funksjonen til appen din.
Sørg dessuten for at du tester de mest brukte komponentene i applikasjonen din, som landingssiden eller påloggingskomponenten. Test også de viktigste funksjonene i applikasjonen din. Dette kan for eksempel være funksjoner som gir penger, som handlekurvfunksjonen.
Når du bestemmer deg for hva du skal teste, er en ting å huske på å aldri teste funksjonalitet som React håndterer selv. For eksempel, i stedet for å teste gyldigheten til rekvisitter, kan du bruke React PropTypes.
Teste en knappekomponent
Husk at du bare bør teste sluttbrukerimplementeringen av en komponent og ikke dens interne funksjoner. For en knappkomponent betyr dette å bekrefte at den gjengis uten å krasje og vises riktig.
Opprett en ny fil i src mappe kalt Button.js og legg til følgende kode.
funksjonKnapp({verdi}) {
komme tilbake (
<knapp>{verdi}</button>
)
}
eksportmisligholde Knapp
Button.js aksepterer en prop kalt verdi og bruker den som knappeverdi.
Skriver din første test
EN lag-reager-app-applikasjon leveres forhåndsinstallert med Jest og React Testing Library. Jest er et lett testbibliotek med innebygde hån- og påstandsfunksjoner. Det fungerer med mange JavaScript-rammeverk. React Testing Library, derimot, har funksjoner som hjelper deg å teste hvordan brukere samhandler med komponenter.
Opprett en ny fil kalt Button.test.js i src-mappen. Som standard identifiserer Jest filer med suffiks med .test.js som testfiler og kjører dem automatisk. Et annet alternativ er å legge til testfilene dine i en mappe kalt __tester__.
Legg til følgende kode i Button.test.js for å lage den første testen.
import { gjengi } fra '@testing-bibliotek/reager';
import Knapp fra '../Knapp';
beskrive('Knappekomponent', () => {
test('Gjengir knappekomponenten uten å krasje', () => {
gjengi (<Knapp />);
});
})
Denne testen definerer først hva testen går ut på ved å bruke beskrivelsesblokken levert av Jest. Denne blokken er nyttig for gruppering av relaterte tester. Her grupperer du testene for Button-komponenten.
Inne i beskriv-blokken har du den første testen i testblokken. Denne blokken godtar en streng som beskriver hva testen skal gjøre og en tilbakeringingsfunksjon som utfører forventningen.
I dette eksemplet skal testen gjengi Button-komponenten uten å krasje. Gjengivelsesmetoden fra React Testing Library utfører selve testen. Den sjekker om Button-komponenten gjengir riktig. Hvis den gjør det, består testen, ellers mislykkes den.
Bruke roller for å finne knappen
Noen ganger vil du sjekke om elementet var montert. Skjermmetoden har en getByRole() funksjon som du kan bruke til å hente et element fra DOM.
screen.getByRole('knapp')
Du kan deretter bruke elementet du har grepet til å utføre tester som å sjekke om det finnes i dokumentet eller ble gjengitt riktig.
getByRole() er ett av mange av spørringene du kan bruke til å velge elementer i en komponent. Sjekk ut andre typer søk i The React Testing Library's "Hvilket søk bør jeg bruke" Veiledning. Også annet enn "knapp"-rollen, de fleste semantiske HTML-elementer har implisitte roller du kan bruke til å utføre spørringene dine. Finn listen over roller fra MDN-dokumenter.
Legg til følgende i testblokken for å bekrefte komponentgjengivelsene.
test('Gjengir knappen uten å krasje', () => {
gjengi (<Knappeverdi="Melde deg på" />);
forventer (screen.getByRole('knapp')).toBeInTheDocument()
});
ToBeInTheDocument()-matcheren sjekker om knappeelementet finnes i dokumentet.
Forvent at knappen gjengis riktig
Knapp-komponenten godtar en prop-verdi og viser den. For at den skal gjengis riktig, må verdien den viser være den samme som den du sendte inn.
Opprett en ny testblokk og legg til følgende kode.
test('Gjengir knappen riktig', () => {
gjengi (<Knappeverdi="Logg Inn" />);
forventer (screen.getByRole('knapp')).toHaveTextContent("Logg Inn")
})
Merk at du ikke trenger å gjøre oppryddinger etter tester når du bruker React Testing Library. I tidligere versjoner må du gjøre oppryddingen manuelt slik:
etter hver (opprydding)
Nå demonterer testbiblioteket komponenter automatisk etter hver gjengivelse.
Lage øyeblikksbildetester
Så langt har du testet oppførselen til Button-komponenten. Skriv øyeblikksbildetester for å teste om komponentens utgang forblir den samme.
Snapshot-tester sammenligner gjeldende utgang med en lagret utgang fra komponenten. Hvis du for eksempel endrer stilen til en Button-komponent, vil øyeblikksbildetesten varsle deg. Du kan enten oppdatere øyeblikksbildet for å matche den endrede komponenten eller angre stilendringene.
Øyeblikksbildetester er veldig nyttige når du vil sikre at brukergrensesnittet ditt ikke endres uventet.
Snapshot-testing er forskjellig fra enhetstester siden du allerede må ha en fungerende kode for å lage øyeblikksbildet.
Du vil bruke renderer-metoden fra react-test-renderer npm-pakken. Så kjør følgende kode for å installere den.
npm installere reagere-test-renderer
I Button.test.js skriver du øyeblikksbildetesten som følger:
test('Matcher øyeblikksbilde', () => {
const tree = renderer.create(<Knappeverdi="Logg Inn" />).toJSON();
forvente(tre).toMatchSnapshot();
})
Det er ingen eksisterende øyeblikksbilder for Button-komponenten, så å kjøre denne testen vil opprette en øyeblikksbildefil ved siden av testfilen:
Knapp
└─── __tester__
│ │ Knapp.tester.js
│ └─── __øyeblikksbilde__
│ │ Knapp.test.js.snap
│
└─── Knapp.js
Nå, når du kjører neste test, vil React sammenligne det nye øyeblikksbildet den genererer med det lagrede.
Skriv tester for de mest brukte komponentene
Denne opplæringen lærte deg hvordan du skriver DOM- og øyeblikksbildetester i React ved å teste en Button-komponent. Det kan være kjedelig å skrive tester for alle komponentene du lager. Disse testene sparer deg imidlertid for tiden du ville ha brukt på å feilsøke allerede distribuert kode.
Du trenger ikke å oppnå 100 prosent testdekning, men sørg for at du skriver tester for de mest brukte og viktigste komponentene dine.
