Share
Hva du skal skapeTestkode er en forvirrende praksis for mange utviklere. Det er forståelig fordi skrive tester krever mer innsats, tid og muligheten til å forutse mulige brukstilfeller. Oppstart og utviklere som arbeider med mindre prosjekter favoriserer vanligvis ignorerende tester helt på grunn av mangel på ressurser og arbeidskraft.
Det er imidlertid et par grunner til at jeg tror at du bør teste komponentene dine:
Reaks er ikke noe annerledes heller. Når hele applikasjonen din begynner å bli en haug med komponenter som er vanskelig å vedlikeholde, gir testen stabilitet og konsistens. Skrivingstester fra første dag vil hjelpe deg med å skrive bedre kode, få feil på bugs, og opprettholde en bedre utviklings arbeidsflyt.
I denne artikkelen vil jeg ta deg gjennom alt du trenger å vite for å skrive tester for React-komponentene dine. Jeg vil også dekke noen av de beste praksis og teknikker mens vi er på den. La oss komme i gang!
Testing er prosessen med å verifisere at vår test påstander er sanne og at de forblir sanne gjennom hele levetiden av søknaden. En test påstand er et boolesk uttrykk som returnerer sant med mindre det er en feil i koden din.
For eksempel kan en påstand være så enkelt som dette: "Når brukeren navigerer til /Logg Inn, en modal med id #Logg Inn skal gjengis. "Så hvis det viser seg at du har slått på påloggingskomponenten på en eller annen måte, vil påstanden returnere falsk. Påstandene er ikke bare begrenset til det som blir gjort - du kan også gjøre påstand om hvordan søknaden reagerer på brukerinteraksjoner og andre handlinger.
Det er mange automatiserte teststrategier som front-end-utviklere bruker til å teste koden sin. Vi vil begrense diskusjonen til bare tre software testparadigmer som er populære blant React: enhetstesting, funksjonstesting og integreringstesting.
Enhetstester er en av testveterna som fortsatt er populære i testkretser. Som navnet antyder, vil du teste individuelle kodestykker for å verifisere at de fungerer uavhengig som forventet. På grunn av Reacts komponentarkitektur er enhetstester en naturlig passform. De er også raskere fordi du ikke trenger å stole på en nettleser.
Enhetstester hjelper deg å tenke på hver komponent i isolasjon og behandle dem som funksjoner. Enhetstester for en bestemt komponent skal svare på følgende spørsmål:
Funksjonstester brukes til å teste oppførselen til en del av søknaden din. Funksjonstester skrives vanligvis fra brukerens perspektiv. Et stykke funksjonalitet er vanligvis ikke begrenset til en enkelt komponent. Det kan være en fullverdig form eller en hel side.
For eksempel, når du bygger et registreringsskjema, kan det innebære komponenter for skjemaelementene, varslene og eventuelle feil. Komponenten som blir gjengitt etter at skjemaet er sendt, er også en del av den funksjonaliteten. Dette krever ikke en browsergjenvinning fordi vi bruker en virtuell DOM i minnet for våre tester.
Integrert testing er en teststrategi hvor alle de enkelte komponentene testes som en gruppe. Integrert testing forsøker å replikere brukeropplevelsen ved å kjøre testene på en faktisk nettleser. Dette er betydelig tregere enn funksjonell testing og enhetstester fordi hver testpakke utføres på en nettleser.
I React er enhetstester og funksjonstester mer populære enn integreringstester fordi de er lettere å skrive og vedlikeholde. Det er det vi vil dekke i denne opplæringen.
Du trenger visse verktøy og avhengigheter for å komme i gang med enhet og funksjonell testing av React-programmet. Jeg har listet dem nedenfor.
Jest er et testramme som krever null konfigurasjon og er derfor lett å sette opp. Det er mer populært enn testrammer som Jasmine og Mocha fordi det er utviklet av Facebook. Jest er også raskere enn resten fordi det bruker en smart teknikk for å parallellere testkjøringer på tvers av arbeidstakere. Bortsett fra det, går hver prøve i et sandkasse miljø for å unngå konflikter mellom to påfølgende tester.
Hvis du bruker create-react-app, leveres den med Jest. Hvis ikke, må du kanskje installere Jest og noen andre avhengigheter. Du kan lese mer om det på den offisielle Jest dokumentasjonssiden.
Selv om du bruker create-react-app, må du installere denne pakken for å gi øyeblikksbilder. Snapshot testing er en del av Jest biblioteket. Så, i stedet for å gi brukergrensesnittet til hele applikasjonen, kan du bruke testgjenvinningen til raskt å generere en serialiserbar HTML-utgang fra den virtuelle DOM. Du kan installere det som følger:
garn tilsett reagens-test-renderer
reagere-dom / test-utils består av noen av testverktøyene som tilbys av React-teamet. Alternativt kan du bruke Enzyme-pakken utgitt av Airbnb. Enzym er mye bedre enn ReactTestUtils fordi det er enkelt å hevde, manipulere og krysse utgangene til React Components. Vi vil starte testene våre med React utils og deretter overgang til Enzyme senere.
For å installere Enzym, kjør følgende kommando.
garn legg til enzym-enzym-adapter-reagere-16
Legg til koden til src / SetupTests.js.
importer configure fra 'enzym'; Importadapter fra 'enzym-adapter-reagere-16'; konfigurere (adapter: ny adapter ());
Det er mer informasjon om dette i delen Testingskomponenter på siden for create-react-app.
Vi skal skrive tester for en enkel demo-applikasjon som viser en mester / detaljvisning av en liste over produkter. Du kan finne demo-applikasjonen i vår GitHub-repo. Søknaden består av en beholderkomponent kjent som ProductContainer og tre presentasjonskomponenter: Produktliste, Produkt detaljer, og ProductHeader.
. ├── package-lock.json ├── package.json ├── offentlig │ ├── index.html │ └── manifest.json ├── src │ ├── komponenter │ │ ├── App.js │ Produktkatalog
Denne demoen er en god kandidat for enhetstesting og funksjonell testing. Du kan teste hver komponent i isolasjon og / eller teste produktlistefunksjonaliteten som helhet.
Når du har lastet ned demoen, opprett en katalog med navnet __tests__innsiden / src / komponenter /. Du kan deretter lagre alle testfiler relatert til denne funksjonaliteten inne i __tests__ katalogen. Testere kaller vanligvis deres testfiler som enten .spec.js eller .test.js-for eksempel, ProductHeader.test.js eller ProductHeader.spec.js.
Lage en ProductHeader.test.js fil hvis du ikke allerede har det. Her er hva våre tester egentlig ser ut som:
Accentsconagua
beskrive ('ProductHeader', () => it ('bestått test', () => forventer (sant) .toBeTruthy ();) det .toBeTruthy ();))Testpakken starter med a beskrive blokk, som er en global Jest-funksjon som aksepterer to parametere. Den første parameteren er tittelen på testpakken, og den andre parameteren er den faktiske implementeringen. Hver den() i en test suite tilsvarer en test eller en spesifikasjon. En test inneholder en eller flere forventninger som kontrollerer tilstanden til koden.
forventer (sann) .toBeTruthy ();
I Jest er en forventning en påstand som enten returnerer sann eller falsk. Når alle påstander i en spesifikasjon er sanne, sies det å passere. Ellers er testen sagt å mislykkes.
For eksempel har vi opprettet to testspesifikasjoner. Den første skal åpenbart passere, og den andre skal mislykkes.
Merk: toBeTruthy () er en forhåndsdefinert matcher. I Jest, gjør hver matcher en sammenligning mellom forventet verdi og den faktiske verdien og returnerer en boolsk. Det er mange flere matchere tilgjengelig, og vi vil se på dem på et øyeblikk.
create-react-app har satt opp alt du trenger for å utføre testpakken. Alt du trenger å gjøre er å kjøre følgende kommando:
garntest
Du bør se noe slikt:
For å gjøre feil test test, må du erstatte toBeTruthy () matcher med toBeFalsy ().
forventer (false) .toBeFalsy ();
Det er det!
Som nevnt tidligere bruker Jest matchere for å sammenligne verdier. Du kan bruke den til å sjekke likestilling, sammenligne to tall eller strenge, og verifisere sannheten av uttrykk. Her er listen over populære kampanjer tilgjengelig i Jest.
å være();toBeNull ()skal defineres()toBeUndefined ()toBeTruthy ()toBeFalsy ()toBeGreaterThan ()toBeLesserThan ()å passe()å inneholde()Dette er bare en smak. Du finner alle tilgjengelige kampanjer i referansedokumenter.
Først skal vi skrive et par tester for ProductHeader komponent. Åpne opp ProductHeader.js-filen hvis du ikke allerede har det.
Import React, Component fra 'reagere'; klasse ProductHeader utvider komponent render () return (Produktoppføringsside
); ; eksporter standard ProductHeader;
Er du nysgjerrig på hvorfor jeg brukte en klassekomponent her i stedet for en funksjonell komponent? Årsaken er at det er vanskeligere å teste funksjonelle komponenter med ReactTestUtils. Hvis du er nysgjerrig på å vite hvorfor, har denne Stack Overflow diskusjonen svaret.
Vi kunne skrive en prøve med følgende forutsetninger:
h2 stikkord.h2 tag skal ha en klasse som heter tittel.For å gjøre en komponent og for å hente relevante DOM noder, trenger vi ReactTestUtils. Fjern dummy-spesifikasjonene og legg til følgende kode:
Import Reakt fra 'reagere'; importere ReactTestUtils fra 'reagere-dom / test-utils'; Import ProductsList from '... / ProductsList'; beskriv ('ProductHeader Component', () => it ('har en h2 tag', () => // Test her); den ('er pakket inn i en tittelklasse', () => / Test her))For å se etter eksistensen av en h2 node, må vi først gjøre våre React-elementer til en DOM-node i dokumentet. Du kan gjøre det ved hjelp av noen av APIene som eksporteres av ReactTestUtils. For eksempel å gjengi vår
const komponent = ReactTestUtils.renderIntoDocument ();
Deretter kan du trekke ut h2 tag fra komponenten ved hjelp av findRenderedDOMComponentWithTag ( 'tag-navnet'). Det kontrollerer alle barnnoder og finner noden som passer til tag-navn.
Her er hele testspesifikasjonen.
det ('har en h2 tag', () => const component = ReactTestUtils.renderIntoDocument (Prøv å lagre det, og testløperen din skal vise deg at testen har passert. Det er litt overraskende fordi vi ikke har en forvente () uttalelse som i vårt tidligere eksempel. De fleste metodene eksporteres av ReactTestUtils har forventninger bygget inn i dem. I dette tilfellet, hvis testverktøyet ikke finner h2 tag, det vil kaste en feil og testene vil automatisk mislykkes.
Prøv nå å opprette koden for den andre testen. Du kan bruke findRenderedDOMcomponentWithClass () for å sjekke om det er noen node med klassen 'tittel'.
det ('har en tittelklasse', () => const component = ReactTestUtils.renderIntoDocument (Det er det! Hvis alt går bra, bør du se resultatene i grønt.
Selv om vi bare skrev to testspesifikasjoner, har vi dekket mye bakken i prosessen. I neste artikkel skriver vi noen fullverdige tester for produktoppføringssiden. Vi erstatter også ReactTestUtils med Enzyme. Hvorfor? Enzyme tilbyr et grensesnitt på høyt nivå som er veldig enkelt å bruke og utvikler-vennlig. Hold deg innstilt for den andre delen!
Hvis du når som helst føler deg fast eller trenger hjelp, gi oss beskjed i kommentarene.
