Testing av beste praksis for reaksjonskomponenter

av React Developers @ Selleo

Den mest populære tilnærmingen for å teste React-komponenter er å bruke enten Mocha + Chai + enzym eller Jest + enzym. I denne artikkelen vil vi beskrive reaksjonskomponenter for å teste praksis med Jest + enzym som også er aktuelle for Mocha + Chai.

Hvis du er ukjent med å teste React-komponenter, bør du også lese:

  • create-react-app README-delen om "Skriveprøver"
  • Jest - Komme i gang
  • Enzym API-dokumentasjon

Test organisering

I større JavaScript-prosjekter legger vi tester nær implementering i __tests__ undermappe. Vanligvis grupperes tester for en komponent etter struktur og atferd legges på toppen av den, som:

Minimal komponenttest bekrefter komponenten som er gjengitt

Minimale komponenttester verifiserer at komponenten gjengir riktig aka røykprøving eller "Build Verification Testing". Det kan gjøres med Enzyme:

eller Jest-øyeblikksbilde:

Den senere genererer __snapshots __ / MainSection.spec.js.snap-filen.

Endringer i øyeblikksbilder bekreftes lokalt via ‘u’ i jest cli og er forpliktet til git-depotet, slik at PR-anmelder kan se dem. Du kan lese mer om Snapshot Testing

For øyeblikket begrenser vi bruken av øyeblikksbilder til komponentgjengivelse og kompleks json (dvs. kartkonfigurasjoner).

Ok, jeg tester gjengivelser - hva skal jeg ellers teste?

Du må huske på at tester er noe du må skrive og vedlikeholde. Å skrive gode tester krever like mye håndverk som å lage programkoden.

Tester er automatisert kvalitetssikring og dokumentasjon for utviklere. Jo større prosjekt og team er, jo mer detaljerte tester trenger du.

Prøv å tenke på fremtiden du kommer tilbake til denne komponenten eller refactoring den - hva ville forventningene dine fra testene være?

  • Isolert - alle interaksjoner med eksterne tjenester skal hånes
  • Spesifikt - hvis du endrer liten funksjonalitet, vil du få en spesifikk testfeilmelding
  • De beskriver hva systemet ikke gjør, slik at du enkelt kan refactor

La oss gjennomgå noen praksis som vi synes er nyttige for å nå disse målene.

Eksplisitt oppsett () i stedet for før hver ()

Fordelen med å bruke eksplisitt oppsett () -funksjon er at det i en test er tydelig hvordan komponenten ble initialisert. Oppsettobjektet er også et bra sted å hekte noen hjelperfunksjoner som samhandler med innpakning, dvs.

Testatferd

Testatferd i praksis går det ned til testing om visse innspill og simulerte hendelser gir forventede resultater, d.v.s.

Du kan se hvordan setup () gjør det veldig raskt å skrive disse testene!

Bruk hjelperfunksjoner

Noen ganger må vi skrive mange lignende tester med bare en inngangsvariabel endret. Dette kan løses med hjelperfunksjon som genererer test:

Den leser mye batter og er lettere å vedlikeholde.

Sammendrag

Praksis som er beskrevet i denne artikkelen:

  • plasser tester nær implementering i __tests__ undermappe
  • Begynn alltid med enkel test for komponentgjengivelse, aka røykprøving, deretter testatferd
  • tenk på fremtiden du kommer tilbake til denne komponenten eller refactoring den
  • bruk eksplisitt oppsett () og returner vanlige snarveivariabler med den
  • bruk hjelperfunksjoner som genererer tester

Vi håper du fant denne artikkelen nyttig. Du kan finne fungerende eksempelkode på min gaffel av redux todomvc-kode på https://github.com/tb/redux/tree/react-testing/examples/todomvc/src/components/__tests__