de Sam Ollason

Acest scurt articol împărtășește experiențele mele de configurare a mediului meu de testare pentru a testa unitatea React Native components with Jest and Enzyme.

Cum se configureaza Jest si Enzyme pentru a testa aplicatiile
Fotografie de Neil Soni pe Unsplash

Instrumente de testare și mediu

Primul lucru pe care l-am învățat a fost abordarea și infrastructura pentru scrierea testelor unitare pentru o aplicație React Native sunt foarte asemănătoare cu scrierea testelor unitare pentru o aplicație React … poate în mod surprinzător.

Cu toate acestea, în timp ce instrumentele și utilizarea suitelor de testare sunt foarte similare, mediul de testare și infrastructura trebuie configurate într-un mod ușor diferit. Acest lucru se datorează în principal faptului că aplicațiile React sunt concepute pentru a funcționa cu DOM-ul într-un browser, în timp ce aplicațiile mobile nu vizează această structură de date pentru redare (ele vizează modulele „native” reale care sunt în schimb pe sistemul mobil).

Folosind Jest

Glumă este o bibliotecă utilizată pentru testarea aplicațiilor JavaScript.

Am vrut să folosesc Jest din mai multe motive:

În primul rând, a fost creat și este întreținut în mod activ de Facebook pentru propriile aplicații React Native.

În al doilea rând, vine preambalat cu versiunea React Native cu care lucram (creată cu reacționează-nativ).

În al treilea rând, Jest este un cadru de testare „cuprinzător” și conține întreaga suită de instrumente de testare de care aveam nevoie. De exemplu, Jest vine cu o bibliotecă pentru a verifica afirmațiile, un tester pentru a efectua teste și instrumente pentru a verifica acoperirea codului. Cu alte soluții, trebuie să alegeți și să asamblați componentele individuale ale unei suite de testare.

Folosind Jest + Enzyme

Am vrut să combin Jest și Enzyme. Există o mulțime de comentarii ușor confuze pe web care compară „Jest versus Enzyme”. Este un pic înșelător. În timp ce Jest este un cadru de testare, vă puteți gândi la Enzyme ca la o bibliotecă care face mai ușoară selectarea și interogarea elementelor din interiorul unui DOM emulat. Asa de este adesea folosit alături de Jest pentru a face scrierea logicii testelor mai curată și mai ușor de citit.

Încă confuz? Este similar cu modul în care jQuery a introdus o sintaxă concisă și clară pentru interogarea și selectarea elementelor din DOM, în timp ce sintaxa care utilizează JavaScript vanilat nu a fost (cel puțin înapoi când a fost introdus pentru prima dată jQuery) nu la fel de clară și ușor de utilizat. Și oamenii nu compară adesea „jQuery versus JavaScript”, cu excepția cazului în care compară un mod particular pe care cele două abordări îl folosesc pentru interogarea și modificarea elementelor din DOM.

Notă: puteți folosi Jest fără Enzyme (cred că Facebook face asta), dar Enzyme vă face testele puțin mai ușor de creat și de citit. Din perspectiva mea, combinarea Enzimei cu Jestul este despre comoditate.

Configurarea Jest + Enzyme

A trebuit să sar prin niște cercuri pentru a configura cu succes Jest și Enzyme în mediul meu React Native.

Jest vine acum cu aplicațiile React Native create folosind instrumentul „react-native”. Aș putea să folosesc Jest din cutie. Minunat!

Dar am întâmpinat câteva probleme încercând să combin enzima cu React Native folosind lor documentație. Nu am ajuns niciodată la fundul a ceea ce a fost problema de bază, dar am continuat să primesc erori „module care nu au fost găsite” ca aceasta aici.

O solutie

În cele din urmă am folosit o soluție care abstractizează în esență o parte din configurare într-un mediu pre-ambalat folosind glumă-enzimă bibliotecă și apoi m-am asigurat că „presetările” jestului au fost setate la „react-native” în pachetul meu.json.

Am urmat instrucțiunile pentru a instala aceste biblioteci:

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

Erorile când am încercat să-mi execut testele m-au îndreptat și pe mine să le instalez în mod explicit:

npm install --save-dev react-dom enzyme

Iată ce a trebuit să adaug manual la 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"
       }  
   }
...
}

Puteți vedea repo aici.

Utilizarea bibliotecii jest-enzimă în acest fel a funcționat ușor pentru mine și a însemnat, de asemenea, că am o configurare ușor mai curată. Acest lucru se datorează faptului că cealaltă abordare (că nu m-am putut apuca de treabă, urmând documentația Enzyme) ar fi însemnat că ar fi trebuit să configurez și să mențin un script separat de „configurație de jest”.

rezumat

Scrierea logicii de afaceri în cadrul testelor Jest + Enzyme pentru React Native pare a fi exact aceeași cu scrierea testelor pentru React folosind Jest + Enzyme. Aceasta înseamnă că exemplele și documentația online pentru testarea unității React sunt ușor de transferat, ceea ce este foarte util. Acesta este un mare pas către viziunea dezvoltatorilor de web care își pot transfera cu ușurință abilitățile pentru a crea aplicații mobile pe mai multe platforme.

Cu toate acestea, pentru ușurința utilizării în faza „scriere de testare”, am plătit prețul la configurarea infrastructurii și a mediului, astfel încât diversele instrumente să fie compatibile cu ecosistemul meu React Native.

În plus, de la întâlnirea problemelor Github în acest domeniu, se pare că există o mulțime de mici instabilități între versiunile React Native, ceea ce face foarte greu să aflăm care este cauza de bază a unei probleme de infrastructură precum cele pe care le-am descris mai sus. Dar presupun că nu putem avea flexibilitate într-un spațiu atât de rapid ca acesta, fără unele provocări.

Aici este repo-ul cu setarea enzimei mele cu câteva exemple de teste.

Sper că ți s-a părut interesant și util! Vă rugăm să nu ezitați să adăugați întrebări sau comentarii mai jos.