Ako nastaviť Jest a Enzyme na testovanie aplikácií React Native

Tento krátky článok zdieľa moje skúsenosti s nastavením môjho testovacieho prostredia na testovanie komponentov React Native s jednotkami Jest a Enzyme.

Testovacie nástroje a prostredie

Prvá vec, ktorú som sa naučil, bol prístup a infraštruktúra na písanie testov jednotky pre aplikáciu React Native veľmi podobné písaniu testov jednotky pre aplikáciu React ... možno neprekvapivo.

Aj keď sú nástroje a použitie testovacích balíkov veľmi podobné, testovacie prostredie a infraštruktúra musia byť nastavené trochu iným spôsobom . Je to v podstate preto, že aplikácie React sú navrhnuté tak, aby fungovali s DOM vo vnútri prehliadača, zatiaľ čo mobilné aplikácie nezameriavajú túto dátovú štruktúru na vykreslenie (zameriavajú sa na skutočné „natívne“ moduly, ktoré sú namiesto toho v mobilnom systéme).

Pomocou žertu

Jest je knižnica používaná na testovanie aplikácií JavaScriptu.

Chcel som použiť Jest z niekoľkých dôvodov:

Najskôr to bolo vytvorené a Facebook ho aktívne udržuje pre svoje vlastné aplikácie React Native.

Po druhé, prichádza s vopred zabaleným balíkom s verziou React Native, s ktorou som pracoval (vytvorenou pomocou reagujúceho natívneho).

Po tretie, Jest je „komplexný“ testovací rámec a obsahuje celú sadu testovacích nástrojov, ktoré som potreboval. Napríklad Jest prichádza s knižnicou na kontrolu tvrdení, testovacím bežcom na skutočné vykonávanie testov a nástrojmi na kontrolu pokrytia kódu. Pri iných riešeniach je potrebné zvoliť a zostaviť jednotlivé komponenty testovacej sady.

Používanie enzýmu Jest +

Chcel som spojiť Jest a Enzyme. Na webe existuje veľa mierne mätúcich komentárov, ktoré porovnávajú výraz „Jest verzus enzým“. To je trochu zavádzajúce. Zatiaľ čo Jest je testovací rámec, môžete si Enzyme predstaviť ako knižnicu, ktorá uľahčuje výber a dopytovanie prvkov vo vnútri emulovaného DOM. Tak to je často používaný spoločne s žart robiť písania logiku skúšky čistejšie a čitateľnejší.

Stále zmätení? Je to podobné s tým, ako jQuery predstavil stručnú a jasnú syntax pre dopytovanie a výber prvkov v DOM, zatiaľ čo syntax pomocou vanilkového JavaScriptu nebola (prinajmenšom späť, keď bol jQuery prvýkrát predstavený) nie taká jasná a ľahko použiteľná. Ľudia často neporovnávajú výrazy „jQuery verzus JavaScript“, pokiaľ neporovnávajú konkrétny spôsob, ktorý tieto dva prístupy používajú na dopytovanie a úpravu prvkov DOM.

Poznámka: Test Jest môžete používať aj bez enzýmu (verím, že to robí Facebook), ale vďaka enzýmu je testovanie a čítanie o niečo jednoduchšie. Z môjho pohľadu je kombinácia Enzymu s Jestom o pohodlnosti.

Nastavuje sa enzým Jest +

Musel som skákať cez niektoré obruče, aby som úspešne nastavil Jest a Enzyme v mojom prostredí React Native.

Aplikácia Jest je teraz súčasťou aplikácií React Native vytvorených pomocou nástroja „native-native“. Takže som mohol Jest použiť po vybalení z krabice. Úžasné!

Ale narazil som na nejaké problémy so skúšaním kombinácie Enzymu s React Native pomocou ich dokumentácie. Nikdy som sa celkom nedostal k základu toho, čo bol základným problémom, ale stále sa mi zobrazovali chyby typu „moduly sa nenašli“, ako je tento.

Riešenie

Nakoniec som použil riešenie, ktoré v podstate odoberá časť nastavenia do vopred zabaleného prostredia pomocou knižnice jest-enzym, a potom som sa uistil, že „prednastavenia“ jest boli v mojom package.json nastavené na „react-native“.

Pri inštalácii týchto knižníc som postupoval podľa pokynov:

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

Chyby, keď som sa pokúsil spustiť moje testy, ma tiež nasmerovali, aby som si ich tiež výslovne nainštaloval:

npm install --save-dev react-dom enzyme

Tu je to, čo som musel manuálne pridať do 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" } } ... }

Repo si môžete pozrieť tu.

Používanie knižnice jest-enzým týmto spôsobom pre mňa fungovalo ľahko a tiež to znamenalo, že som mal trochu čistejšie nastavenie. Je to preto, lebo iný prístup (ktorý som sa nemohol dostať do práce podľa dokumentácie o enzýmoch) by znamenal, že som tiež musel nastaviť a udržiavať samostatný skript „jest config“.

Zhrnutie

Písanie obchodnej logiky vo vnútri testov Jest + Enzyme pre React Native sa zdá byť úplne rovnaké ako písanie testov pre React pomocou Jest + Enzyme. To znamená, že príklady a dokumentácia online pre testovanie jednotiek React sú ľahko prenosné, čo je skutočne užitočné. Je to skvelý krok k vízii webových vývojárov, ktorí sú schopní ľahko preniesť svoje zručnosti a vytvoriť mobilné aplikácie pre rôzne platformy.

Za jednoduché použitie vo fáze „písania testu“ som však zaplatil cenu pri nastavovaní infraštruktúry a prostredia, aby boli rôzne nástroje kompatibilné s mojím ekosystémom React Native.

Navyše, z narazenia na problémy Github v tejto oblasti sa zdá, že medzi verziami React Native existuje veľa malých nestability, kvôli ktorým je skutočne ťažké zistiť, čo je základnou príčinou problému s infraštruktúrou, ako sú tie, ktoré som popísal vyššie. Predpokladám však, že v takom rýchlo sa rozvíjajúcom priestore nemôžeme mať flexibilitu bez problémov.

Tu je repo s mojím nastavením jest-enzým s niekoľkými príkladmi testov.

Dúfam, že vás to považovalo za zaujímavé a užitočné! Neváhajte a pridajte akékoľvek otázky alebo komentáre nižšie.