Sådan opsættes Jest and Enzyme til at teste React Native apps

Denne korte artikel deler mine erfaringer med at oprette mit testmiljø til enhedstest React Native-komponenter med Jest og Enzyme.

Testværktøjer og miljø

Den første ting, jeg lærte, var fremgangsmåden og infrastrukturen til at skrive enhedstest til en React Native-app ligner meget på at skrive enhedstest til en React-app ... måske ikke overraskende.

Selvom værktøjet og brugen af ​​testpakkerne er meget ens, skal testmiljøet og infrastrukturen indstilles på en lidt anden måde . Dette skyldes i det væsentlige, at React-apps er designet til at arbejde med DOM inde i en browser, mens mobilapps ikke målretter mod denne datastruktur til gengivelse (de målretter mod faktiske 'native' moduler, der er på mobilsystemet i stedet).

Brug af Jest

Jest er et bibliotek, der bruges til at teste JavaScript-apps.

Jeg ville bruge Jest af flere grunde:

For det første blev det oprettet og vedligeholdes aktivt af Facebook til deres egne React Native apps.

For det andet kommer den færdigpakket med den version af React Native, jeg arbejdede med (oprettet ved hjælp af react-native).

For det tredje er Jest en 'omfattende' testramme og indeholder hele den række testværktøjer, jeg havde brug for. For eksempel kommer Jest med et bibliotek til at kontrollere påstande, en testløber til faktisk at køre tests og værktøjer til at kontrollere kodedækning. Med andre løsninger skal man vælge og samle individuelle komponenter i en testpakke.

Brug af Jest + Enzyme

Jeg ville kombinere Jest og Enzyme. Der er mange let forvirrende kommentarer på nettet, der sammenligner 'Jest versus Enzyme'. Dette er lidt vildledende. Mens Jest er en testramme, kan du tænke på Enzyme som et bibliotek, der gør det lettere at vælge og forespørge elementer inde i en emuleret DOM. Så det bruges ofte sammen med Jest til at gøre skrivning af testlogikken renere og lettere at læse.

Stadig forvirret? Det svarer til, hvordan jQuery introducerede en kortfattet og tydelig syntaks til forespørgsel og valg af elementer i DOM, mens syntaksen ved hjælp af vanille JavaScript var (i det mindste tilbage da jQuery først blev introduceret) ikke så klar og nem at bruge. Og folk sammenligner ikke ofte 'jQuery versus JavaScript', medmindre de sammenligner en bestemt måde, som de to tilgange bruger til at forespørge og ændre elementer i DOM.

Bemærk: Du kan bruge Jest uden enzym (jeg tror, ​​at Facebook gør dette), men enzym gør dine tests lidt lettere at oprette og læse. Fra mit perspektiv handler det om bekvemmelighed at kombinere enzym med Jest.

Opsætning af Jest + Enzyme

Jeg var nødt til at springe gennem nogle bøjler for at kunne konfigurere Jest og Enzyme i mit React Native-miljø.

Jest kommer nu inkluderet i React Native apps oprettet ved hjælp af 'react-native' værktøjet. Så jeg kunne bruge Jest ud af kassen. Vidunderlig!

Men jeg stødte på nogle problemer med at prøve at kombinere Enzyme med React Native ved hjælp af deres dokumentation. Jeg kom aldrig helt i bunden af, hvad der var det underliggende problem, men jeg fik ved med at få 'moduler ikke fundet' fejl som denne her.

En løsning

Til sidst brugte jeg en løsning, der i det væsentlige abstraherer noget af opsætningen til et forpakket miljø ved hjælp af jest-enzymbiblioteket og sørgede derefter for, at jest 'presets' blev indstillet til 'react-native' i min pakke.json.

Jeg fulgte instruktionerne for at installere disse biblioteker:

npm install jest-environment-enzyme jest-enzyme enzyme-adapter-react-16 --save-dev

Fejl, da jeg forsøgte at køre mine tests, fik mig også til udtrykkeligt at installere disse også:

npm install --save-dev react-dom enzyme

Her er hvad jeg skulle tilføje manuelt til package.json:

// package.json before with react-native init { ... "jest": { "presets": ["react-native"], } ... } // package.json after my manual changes: { ... "jest": { "presets": ["react-native"], // not clear in documentation! "setupTestFrameworkScriptFile": "jest-enzyme", "testEnvironment": "enzyme", "testEnvironmentOptions": { "enzymeAdapter": "react16" } } ... }

Du kan se repoen her.

Brug af jest-enzymbiblioteket på denne måde fungerede let for mig, og det betød også, at jeg havde en lidt renere opsætning. Dette skyldes, at den anden tilgang (at jeg ikke kunne komme på arbejde efter enzymdokumentationen) ville have betydet, at jeg også var nødt til at oprette og vedligeholde et separat 'jest config' script.

Resumé

At skrive forretningslogik inde i Jest + Enzym-test for React Native synes at være nøjagtigt den samme som at skrive tests til React ved hjælp af Jest + Enzyme. Dette betyder, at eksemplerne og dokumentationen online til React-enhedstest let kan overføres, hvilket er virkelig nyttigt. Dette er et godt skridt i retning af visionen om, at webudviklere let kan overføre deres færdigheder til at oprette mobilapps på tværs af platforme.

For brugervenligheden i 'testskrivningsfasen' betalte jeg dog prisen, når jeg oprettede infrastrukturen og miljøet, så de forskellige værktøjer var kompatible med mit React Native-økosystem.

Derudover ser det ud til, at der er mange små ustabiliteter mellem React Native-versioner fra at komme på tværs af Github-problemer i dette område, der gør det virkelig svært at finde ud af, hvad der er den underliggende årsag til et infrastrukturproblem som dem, jeg beskrev ovenfor. Men jeg formoder, at vi ikke kan have fleksibilitet i et så hurtigt bevægende rum som dette uden nogle udfordringer.

Her er repoen med min jest-enzymopsætning med et par eksempler på tests.

Jeg håber, du fandt dette interessant og nyttigt! Du er velkommen til at tilføje spørgsmål eller kommentarer nedenfor.