8 lucruri care fac cel mai bun cadru de testare a reacțiilor

Prezentare generală

Jest este o bibliotecă de testare JavaScript deschisă de pe Facebook. Sloganul său este "Testarea delicioasă a JavaScript". În timp ce Jest poate fi folosit pentru a testa orice bibliotecă JavaScript, acesta strălucește când vine vorba de React și React Native.

Acest lucru nu este o surpriză deoarece atât React, cât și Jest provin din Facebook, care este un utilizator important al ambelor. În acest tutorial vă voi arăta opt aspecte diferite ale lui Jest care fac o astfel de plăcere pentru testarea aplicațiilor React. 

1. Este o briză pentru a crea

Jest este destul de simplu de instalat pe cont propriu. Puteți să-l instalați într-un spațiu gol folosind fie npm sau fire. Prefer firul. Vedeți 6 lucruri care fac firele cel mai bun Manager de pachete JavaScript pentru a înțelege de ce. Este la fel de simplu ca:

fire adăuga -dev jest 

Dacă preferați npm, tastați:

npm instalează -save-dev jest

Înainte de a putea testa, să scriem un cod pentru a testa. Aici este palindrome.js:

funcția estePalindromul (ele) const count = s.length - 1 dacă este numărul < 2  return true  for (i = 0; i < (count + 1) / 2; ++i)  if (s[i] !== s[count - i]) return false  return true  module.exports = isPalindrome 

Iată un test jest într-un fișier numit palindrome.test.js:

const estePalindromul = necesită testul '' / palindrom '' ('detectează palindromele', () => așteptați (isPalindrome ('palindrome')) toBe (false) a se aștepta (isPalindrome ('a')) toBe (adevărat) așteptați (isPalindrome ('gg')) ). toBe (false))

Pentru a rula testele, adăugați aceasta la package.json:

 "scripturi": "test": "jest" 

Acum puteți rula testele cu test de fire sau testarea npm:

> fir de testare a firelor rulează v1.1.0 warning package.json: Nici un câmp de licență $ jest PASS ./palindrome.test.js ✓ detectează palindromes (6ms) Test Suites: 1 trecut, 1 total Teste: 1 trecut, 1 total Snapshots: 0 total Ora: 1.667s Ran toate seturile de testare. ✨ Efectuată în 3.15s. 

Acest lucru este destul de simplu. Dar dacă folosiți reac-create-app pentru a vă crea proiectul React, nici măcar nu trebuie să faceți acest lucru. Pachetul de jest vine în pachet și puteți începe să scrieți imediat teste.

2. Jest este fulger rapid

Jest este rapid. Foarte rapid. Când testele dvs. sunt legate de procesor, acesta poate rade timp semnificativ de la testările dvs. Airbnb a trecut de la Mocha la Jest, iar durata totală de testare a scăzut de la mai mult de 12 minute la doar 4,5 minute pe o mașină CI cu 32 nuclee grele. Testele locale au folosit 45 de minute, ceea ce a scăzut la 14,5 minute. 

Ce face Jest atât de repede? Este o combinație de mai mulți factori:

  • Paralelizare: acest lucru este destul de evident, iar alte cadre de testare îl folosesc și el.
  • Încercați mai întâi cele mai lente teste: acest lucru asigură că toate miezurile sunt utilizate la valoarea maximă.
  • Caching transformă babel: reduce transformările de babel de intensitate CPU. 

3. Jest este un ghișeu unic

Jest vine cu magistrați încorporați, spioni și cu propria bibliotecă de batjocură. Era bazată pe Jasmine, așa că a moștenit toată bunătatea lui Jasmine. Dar, în versiuni mai recente, Jest a plecat de la Jasmine, dar a păstrat aceleași funcționalități și a adăugat propria sa aromă și îmbunătățiri.

Atunci când se compară cu o soluție de testare personalizată bazată pe Mocha, este clar că ușurința de utilizare este o preocupare majoră a designului Jest.

4. Are o momeală minunată

Mocking-ul este o parte incredibil de importantă a testării unităților. Acest lucru este important în special dacă vă interesează testele rapide (și cine nu?).

Mocking vă permite să înlocuiți dependențele irelevante care pot fi lent și chiar timpul de control pentru un cod care se bazează pe calendar. Jest vă permite să vă controlați complet dependențele și timpul.

Simple Mock Functions

Amintirile de batjocură sunt o tradiție de lungă durată a testelor de unitate. Dacă codul dvs. citește un fișier, scrie într-un fișier, solicită un serviciu la distanță sau accesează o bază de date, poate fi lent și poate fi complicat să configurați și să vă curățați după test. Atunci când rulează în paralel, este posibil să nu fie chiar posibil să se controleze corect.

În aceste cazuri, este mai bine să înlocuiți dependența reală cu o funcție falsă care nu face altceva decât să înregistreze faptul că a fost numită, astfel încât să puteți verifica fluxul de lucru. jest.fn () funcția falsă vă permite să furnizați valori de întoarcere conservate (pentru mai multe convorbiri consecutive) și înregistrează de câte ori a fost apelată și care au fost parametrii în fiecare apel.

Mock-uri modulului manual

Uneori este posibil să trebuiască să înlocuiți un modul întreg cu datele sale, și nu cu câteva funcții. Jest vă permite să faceți acest lucru plasând modulul dvs. cu același nume într-un __mocks__ subdirector.

Ori de câte ori codul dvs. utilizează modulul destinație, acesta va accesa modelul dvs. mai degrabă decât modelul real. Puteți selecta selectiv chiar și pentru anumite teste să utilizați modulul original apelând jest.Unmock ( 'modulename').

Timer Mocks

Sincronizarea este tentativă de teste unitare. Ce se întâmplă dacă doriți să testați codul care se scurtează după un minut? Codul care se declanșează la fiecare 30 de secunde? Cod special care rulează un algoritm de reconciliere la sfârșitul lunii?

Acestea sunt greu de testat. Puteți fie să cedați cerințelor de timp ale codului original (și apoi testele dvs. vor fi foarte lente), fie puteți manipula timpul, ceea ce este mult mai util. Jest vă permite să controlați următoarele funcții legate de temporizator:

  • setTimeout ()
  • setInterval ()
  • clearTimeout ()
  • clearInterval ()

Modelul ES6 Mocks

Jest sprijină pe deplin clasele ES6 și oferă diverse modalități de a le bate:

  • Modul automat: vă permite să spionați apelurile către constructor și toate metodele, dar întotdeauna se întoarce undefined.
  • Manipularea manuală: implementați-vă propriul momeală în __mocks__ subdirector.
  • Mock fabrica de clasă cu o funcție de ordin superior.
  • Selecționarea batjocoritorului folosind mockImplementation () sau mockImplementationOnce ().

5. Jest acceptă TypeScript

TypeScript este un superset populat tastat de JavaScript care se compilează la JavaScript simplu. Jest acceptă TypeScript prin pachetul ts-jest. Se descrie ca preprocesor de tip TypeScript cu suport pentru hartă sursă pentru Jest și are o comunitate foarte activă.   

6. A fost acoperită de tine

Jest are rapoarte de acoperire încorporate. Testele tale sunt la fel de bune ca și acoperirea lor. Dacă testați doar 80% din codul dvs., atunci bug-uri în celelalte 20% vor fi descoperite numai în producție. 

Uneori, din perspectiva afacerii, este logic să ignorați testarea anumitor părți ale sistemului. De exemplu, instrumentele interne pe care propriii ingineri experți le utilizează și le schimbă frecvent pot să nu necesite același nivel de testare riguroasă ca și codul de producție. Dar, în orice caz, aceasta ar trebui să fie o decizie conștientă și ar trebui să puteți vedea exact acoperirea de testare a diferitelor părți ale sistemului dvs.. 

Iată cum se poate genera un raport de acoperire pentru exemplul simplu de palindrom:

> test de fire - fire de acoperire rula v1.1.0 warning.json: Nici un câmp de licență $ jest "--coverage" PASS ./palindrome.test.js ✓ detectează palindromes (4ms) --------- ----- | ---------- | ---------- | ---------- | ---------- | Fișier | % Stmts | % Sucursala | Funcții% % Linii | -------------- | ---------- | ---------- | ---------- | -------- | Toate fișierele | 100 | 100 | 100 | 100 | palindrome.js | 100 | 100 | 100 | 100 | -------------- | ---------- | ---------- | ---------- | -------- | Teste de testare: 1 trecut, 1 total Teste: 1 trecut, 1 total Snapshots: 0 total Time: 1.712s Ran toate testele. ✨ Terminat în 3.41s.

7. Există instantanee

Testarea instantanee este minunată. Vă permite să capturați un șir care reprezintă componenta dvs. randată și să-l stocați într-un fișier. Apoi îl puteți compara mai târziu pentru a vă asigura că interfața de utilizare nu sa schimbat. Deși este ideal pentru aplicațiile React și React Native, puteți utiliza instantanee pentru compararea valorilor serializate ale altor cadre. Dacă schimbați, de fapt, interfața dvs. utilizator, trebuie să actualizați fișierele instantanee pentru ao reflecta desigur.

8. Este Delta testarea cu ceas

Jest poate rula în modul de vizionare, unde rulează automat testele ori de câte ori modificați codul. Îl rulați cu --watchAll comanda liniei de comandă și va monitoriza cererea dvs. de modificări. Am alergat în modul de vizionare și am introdus un bug în scop la palindrome.js, și aici rezultă:

 FAIL ./palindrome.test.js - detectează palindromes (11ms) ● detectează palindromele așteaptă (primit) .toBe (așteptat) // Object.is egalitate Valoarea așteptată a fi: true Received: false 6 | așteptați (isPalindrom ('a')) toBe (adevărat) 7 | așteptați (isPalindrome ('gg')). toBe (true)> 8 | așteptați (isPalindrome ('pop')) toBe (adevărat) 9 | așteptați (isPalindrome ('1212')) toBe (false) 10 | ) 11 | la Obiect..test (palindrome.test.js: 8: 30) Test Suites: 1 eșuat, 1 total Teste: 1 eșuat, 1 total Snapshots: 0 total Time: 0.598s, Urmăriți utilizarea: Apăsați w pentru a afișa mai multe.

Concluzie

Jest este un cadru rapid de testare ușor de configurat. Este dezvoltat activ și folosit de Facebook pentru a testa toate aplicațiile lor React, precum și de mulți alți dezvoltatori și companii.

Acesta are tot ce aveți nevoie într-un singur pachet convenabil, suportă TypeScript, iar IMO este cea mai bună opțiune pentru testarea aplicațiilor React și React Native. De asemenea, este foarte important să migrăm de la alte soluții de testare.

Amintiți-vă, React a crescut în popularitate. De fapt, avem o serie de elemente din piața Envato care sunt disponibile pentru cumpărare, revizuire, implementare și așa mai departe. Dacă sunteți în căutarea unor resurse suplimentare în jurul React, nu ezitați să le verificați.

Cod