Configurarea Jest și Depanarea Testelor bazate pe Jest

jest configuration debugging jest based tests

Aflați despre configurația Jest, depanarea și compararea Jest cu alte cadre de testare JavaScript, în special Jest vs Mocha și Jest vs Jasmine:

In acest Seria Jest informativ , am explorat totul Testarea aplicațiilor, a batjocurilor și a spionilor React folosind Jest în ultimul nostru tutorial.

În acest tutorial, vom afla mai multe despre fișierele Jest Config și vom vedea cum puteți depana efectiv testele Jest pentru depanarea unuia sau mai multor teste multiple.

De asemenea, vom explora unele dintre opțiunile utilizate în mod obișnuit în fișierul Jest Config care ar putea fi configurate independent într-un proiect sau pe cele care pot fi adăugate ca parte a configurației package.json în sine.

Vom folosi Visual Studio Code pentru scrierea testelor noastre Jest și vom folosi o extensie sau un plugin în VS Code pentru a permite suportul de depanare pentru testele Jest.

În plus, vom compara diferitele cadre de testare Javascript precum Mocha și Jasmine cu Jest și vom înțelege avantajele și dezavantajele reciproce.

Ce veți învăța:

• Există Config
  • # 1) Acoperire legată
  • # 2) Mock Related
  • # 3) Testele legate
  • Tutorial video despre configurarea IS
• Depanare folosind Jest
  • # 1) Utilizarea Node's Native Debugger
  • # 2) Utilizarea configurației de depanare a codului VS
  • Tutorial video despre depanarea IS
• Există Mocha Vs Jasmine
• Concluzie
  • Lectură recomandată

Există Config

Configurația Jest poate fi specificată în 3 moduri

• Printr-o cheie din fișierul package.json.
• Printr-un fișier jest.config.js - Fișier de configurare scris ca un modul.
• Printr-un JSON care ar putea fi folosit cu opțiunea ca –config flag.

Cu toate abordările de mai sus, puteți obține același rezultat. Să vedem primul pas - adică adăugarea configurației Jest printr-o cheie din fișierul package.json.

În fișierul package.json existent, adăugați o nouă cheie numită „jest”. Acesta nu este altceva decât un set de perechi cheie-valoare în format JSON. Toate opțiunile de configurare legate de Jest pot fi adăugate în continuare la această secțiune în fișierul package.json.

Opțiunile de configurare cele mai frecvent utilizate sunt enumerate mai jos.

# 1) Acoperire legată

colectaCoperire, acoperirePrag, acoperireRaportari, acoperireDirectory - Acestea sunt cele mai utilizate opțiuni. Acoperirea este o valoare importantă și asigură testarea codului în raport cu un prag prestabilit.

O explicație detaliată a fiecăruia dintre ele este după cum urmează:

# 1) collectCoverage: Această opțiune este utilizată pentru a specifica dacă dorim ca testerul Jest să colecteze sau nu informații de acoperire. Când este setat la adevărat, alergătorul Jest colectează informațiile de acoperire. Cu această opțiune, acoperirea va fi colectată și afișată pe consolă la sfârșitul executării testului, așa cum se arată mai jos.

c ++ inserare cod sortare

# 2) Prag de acoperire: Această setare ne permite să specificăm valorile prag pentru acoperire în termeni procentuali. Acest lucru este foarte util atunci când organizația sau echipa dorește să adere la o anumită valoare minimă a acoperirii fără de care niciun cod nu poate fi împins sau combinat la ramura principală.

Să vedem cum poate fi folosit acest lucru.

Acoperirea poate fi specificată la nivel global, la nivel de fișier sau la orice alt regex. Când este specificat la nivel global, tot pragul specificat trebuie să se potrivească pentru toate fișierele combinate din proiect.

Specificarea acoperirii la nivelul fișierului este, de asemenea, posibilă, prin schimbarea „global” în nume de fișier sau regex. Configurațiile de prag pot varia în funcție de cerință.

# 3) acoperire Reporteri: Această configurație este utilizată pentru a specifica ce reporter doriți să utilizați pentru a genera raportul de acoperire. Există o mulțime de reporteri existenți ca pachete NPM disponibile care ar putea fi utilizate pentru a genera un raport de acoperire la sfârșitul execuției testului.

# 4) DirectorDirectie: Această setare permite utilizatorului să specifice directorul în care rapoartele de acoperire ar trebui să fie salvate sau persistate după ce au fost create.

Dat mai jos este un exemplu combinat de utilizare a tuturor setărilor de configurare legate de acoperire.

Aici am folosit 2 reporteri de acoperire, adică lcov și text. Lcov este acoperirea liniei Linux și este prezentă implicit, iar reporterul „text” înseamnă că ieșirea de acoperire va fi afișată și pe consolă. Raportul de acoperire va fi generat pe calea specificată în setarea „acoperireDirectoriu”.

combina codul de sortare c ++

# 2) Mock Related

Mock-urile sunt foarte utilizate în timpul testării cu Jest. Ambele opțiuni de configurare de mai jos permit configurarea ușoară și eliminarea simulărilor.

• autoMock-uri: Când este setat la adevărat, acest lucru va bate în mod implicit toate modulele care sunt importate în test.
• clearMocks: Când este setat la adevărat, acest lucru va șterge toate setările / modulele batjocurate după fiecare test, astfel încât fiecare test să înceapă cu o stare nouă. Acest lucru poate fi realizat și folosind metoda testCleanup sau metoda „după”, dar dacă îl aveți în configurare, este chiar mai ușor.

# 3) Testele legate

# 1) testTimeout: Această configurație este utilizată pentru a oferi o setare de expirare dură a testelor în milisecunde. Orice test care depășește acest prag configurat va fi marcat eșuat din cauza excepției de expirare.

# 2) Global: Această configurare este utilizată pentru a seta variabile globale care ar trebui să fie disponibile la fiecare test.

Să încercăm să folosim o variabilă globală în test și să vedem dacă funcționează conform așteptărilor.

După executarea acestui test, valoarea globalVar trebuie înregistrată.

Verifica Aici pentru lista exhaustivă a tuturor opțiunilor de configurare.

Tutorial video despre configurarea IS

Depanare folosind Jest

În această secțiune, vom încerca să înțelegem cum putem depana testele scrise pe baza Jest.

Vom aplica și vom înțelege 2 moduri diferite în care putem depana testele Jest.

1. Depanatorul nativ al nodului și apoi folosind Chrome Inspector pentru depanarea testelor.
2. Utilizarea configurației de depanare a Visual Studio Code pentru a depana testele în cadrul editorului Visual Studio Code. Acesta este cel mai frecvent mod de depanare, deoarece Visual Studio Code este editorul implicit ales pentru majoritatea dezvoltării Javascript în aceste zile.

Fiecare dintre aceste abordări este explicată mai jos în detaliu.

# 1) Utilizarea Node's Native Debugger

Pentru a utiliza debuggerul nativ Node JS, trebuie să inserăm cuvântul cheie „debugger” în test, unde dorim să plasăm punctul de întrerupere.

Odată ce executorul testului întâlnește depanator comanda, întrerupe execuția și dacă atașăm instrumente de depanare chrome, atunci putem depana codul de testare (precum și funcția testată) folosind instrumentele Chrome.

Browserul Chrome este o condiție prealabilă aici pentru a utiliza Node’s Native Debugger.

Vă rugăm să urmați pașii de mai jos.

# 1) Adăugați cuvânt cheie debugger în cadrul testului, adică în punctul în care doriți ca testul să atingă punctul de întrerupere, introduceți comanda „debugger”

#Două) Executați testul utilizând semnalizatorul –inspect-brk.

Utilizați comanda de mai jos pentru a executa testul în modul punct de întrerupere.

# 3) Atașați depanatorul nodului în Chrome. Acum, în browserul Chrome, navigați la chrome: // inspectați și conectați-vă la ascultătorul țintă creat de pasul de mai sus.

# 4) Continuați execuția și veți vedea că punctul de întrerupere atinge în inspectorul de depanare chrome și puteți depana stiva de apeluri și starea obiectului în depanatorul chrome în sine.

Această abordare de depanare a testelor Jest este în regulă, dar nu foarte ușor de utilizat, deoarece trebuie să continuați să treceți de la editorul de cod la Chrome și invers, ceea ce provoacă multe fricțiuni. În secțiunea viitoare, vom vedea modalitățile de configurare a depanatorului în cadrul editorului Visual Studio Code.

# 2) Utilizarea configurației de depanare a codului VS

# 1) Selectați secțiunea Debug / Run din Visual Studio Code din panoul din stânga.

cel mai bun convertor de pe YouTube în mp4 online

#Două) Acum, vom actualiza configurația de depanare pentru testele de jest. Pentru aceasta, adăugați o nouă configurație selectând opțiunea de meniu.

# 3) Odată ce opțiunea Adăugare configurare este selectată, va deschide fișierul `launch.json` cu conținutul implicit în panoul editorului. Eliminați conținutul implicit și copiați conținutul de mai jos pentru a crea o configurație de depanare pentru testele Jest.

# 4) Salvați configurația de conținut nou adăugată care va fi utilizată pentru depanarea testelor Jest. Dacă ați citit cu atenție configurația, este similar cu ceea ce am făcut atunci când am încercat să ne conectăm la depanatorul Node din instrumentele Chrome Developer prin intermediul comenzii.

Avantajul de a avea config aici este că testele vor rula / depana ca parte a Editorului în sine (în acest caz este VSCode) și nu trebuie să ne conectăm la nicio aplicație externă.

# 5) Odată ce configurația de depanare este creată, puteți adăuga acum puncte de întrerupere la teste și executa folosind această configurație RUN. Acest lucru vă va asigura că testul se oprește la punctele de întrerupere și puteți depana valorile, starea obiectului la punctul de întrerupere din fișierul de testare real.

Punctele de întrerupere pot fi adăugate făcând clic lângă numerele de linie din fișierele de cod.

# 6) Odată adăugat punctul de întrerupere, putem selecta configurația Run pe care am adăugat-o la pasul # 3 pentru a executa / depana testul.

# 7) Când selectați / faceți clic pe butonul Executare, ar trebui să puteți vedea că execuția atinge punctul de întrerupere care a fost plasat și puteți obține mai multe detalii, cum ar fi valorile mediului / variabilelor, urmărirea stivei, etc.

Butoanele de control al fluxului de punct de întrerupere / cod pot fi utilizate pentru a trece la următorul punct de întrerupere sau a vă deplasa în interiorul funcției pentru mai multe detalii.

Video Tutorial He ISDepanare

Există Mocha Vs Jasmine

În secțiunea de mai jos vom compara Jest vs Mocha și Jest vs Jasmine pe diferiți parametri și comparăm caracteristici precum testarea instantanee, ușurința de configurare și capacitățile diferitelor cadre.

Concluzie

În acest tutorial, am aflat despre diferitele moduri în care vă puteți depana testele Jest în Visual Studio Code sau în Inspectorul Chrome utilizând depanatorul nativ al nodului.

De asemenea, am explorat opțiunile de configurare utilizate în mod obișnuit în fișierul de configurare Jest. Configurația Jest vă ajută să realizați o mulțime de lucruri, cum ar fi acoperirea codului, rapoarte HTML, configurarea comportamentelor simulate, configurarea variabilelor globale etc.

PREV Tutorial | PRIMUL Tutorial

Lectură recomandată

• Jest Tutorial - Testarea unității JavaScript folosind Jest Framework
• Cum să testați aplicațiile React folosind Jest Framework
• Tutorial Jasmine Framework, inclusiv Jasmine Jquery cu exemple
• Versiuni distribuite: configurația Jenkins Master Slave
• Tehnici de depanare în seleniu: puncte de întrerupere, mod de depanare și altele
• Tutorial de testare a configurației cu exemple
• Cum se configurează cadrul de testare Node.js: Tutorial Node.js
• Cele mai bune 25 de cadre de testare Java și instrumente pentru testarea automatizării (partea 3)