Meniu

Jest Tutorial - Testarea unității JavaScript folosind Jest Framework

  • Principal
  • Alte
  • Jest Tutorial - Testarea unității JavaScript folosind Jest Framework

jest tutorial javascript unit testing using jest framework

Încercați Instrumentul Nostru Pentru Eliminarea Problemelor

În acest tutorial Jest, vom învăța despre diferite caracteristici Jest, Jest Matchers și cum să utilizați cadrul Jest pentru testarea unității JavaScript:

Jest este un cadru de testare Javascript construit de Facebook.

Este conceput în principal pentru aplicațiile bazate pe React (care este, de asemenea, construit de Facebook), dar ar putea fi folosit pentru a scrie scenarii de automatizare pentru orice baze de cod bazate pe Javascript.

În acest tutorial de testare Jest, vom învăța despre diferite caracteristici ale Jest, potrivirile sale și vom vedea cum putem folosi Jest cu un exemplu de la un capăt la altul. De asemenea, vom explora despre acoperirea codului folosind Jest.

Există un tutorial

Lista tutorialelor din această serie JEST

Tutorial nr. 1: Jest Tutorial - Testarea unității JavaScript cu Jest Framework
Tutorial nr. 2: Cum să testați aplicațiile React folosind Jest Framework
Tutorial # 3: Configurarea Jest și Depanarea Testelor bazate pe Jest

Ce veți învăța:

Noțiuni de bază cu testarea Jest

Unele dintre avantajele / caracteristicile Jest sunt prezentate mai jos:

  1. Este necesară configurarea zero.
  2. Rapid: Testele Jest rulează în paralel - la rândul său, aceasta reduce considerabil timpul de execuție a testului.
  3. Acoperire cod încorporat: Jest acceptă acoperirea codului imediat - aceasta este o valoare foarte utilă pentru toate conductele de livrare bazate pe CI și eficacitatea generală a testelor unui proiect.
  4. Teste izolate și cu nisip: Fiecare test Jest rulează în propria sa cutie de nisip, ceea ce asigură că nu există două teste care să poată interfera sau să se impacteze reciproc.
  5. Suport puternic de batjocură: Testele Jest acceptă toate tipurile de batjocură - fie că este vorba de batjocură funcțională, de timer sau de batjocură apeluri individuale API.
  6. Sprijină testarea instantanee: Testarea instantanee este relevantă din perspectiva React. Jest acceptă captarea unui instantaneu al componentei de reacție testate - acest lucru se poate valida cu ieșirea reală a componentei. Acest lucru ajută foarte mult la validarea comportamentului componentei.

Jest Framework pentru testarea unității JavaScript

În această secțiune, vom vedea un exemplu de la capăt la cap pentru a scrie teste folosind cadrul JEST pentru o funcție Javascript simplă. În primul rând, să vedem cum să instalăm cadrul JEST în proiectul nostru

Instalare IS

Jest este pur și simplu un pachet de noduri și poate fi instalat folosind orice manager de pachete bazat pe noduri. Exemplu, npm sau fire.

Să vedem câteva exemple de comenzi care pot fi utilizate pentru a instala pachetul Jest.

yarn add --dev jest npm install --save-dev jest

Pentru instalarea modulului Jest la nivel global, puteți utiliza pur și simplu semnalizatorul ‘-g’ împreună cu comanda npm. Acest lucru vă va permite să utilizați comenzile Jest direct fără a configura fișierul pachet pentru testele npm.

npm install -g jest

Utilizarea Jest într-un proiect bazat pe noduri

Pentru a utiliza Jest într-un proiect bazat pe noduri, pur și simplu utilizați comenzile din secțiunea de mai sus pentru a instala pachetul de noduri pentru Jest.

Urmați pașii de mai jos, pentru a crea un proiect nod de la început și apoi instalați Jest în el.

# 1) Creați un folder / director cu un nume ca nume de proiect, de exemplu , myFirstNodeProject

#Două) Acum folosind terminalul sau linia de comandă, navigați la proiectul creat în pasul de mai sus și executați scriptul inițial npm folosind comanda de mai jos.

npm init

# 3) Odată ce comanda de mai sus este executată, aceasta va solicita diferite întrebări / parametri.

unix shell scripting întrebări de interviu răspunsuri și explicații pdf

De exemplu , numele proiectului, versiunea etc. Pur și simplu continuați să apăsați Enter (și acceptați valorile implicite). Odată finalizat, veți vedea un fișier package.json creat în proiectul dvs. Acesta este un fișier de configurare obligatoriu pentru orice proiect bazat pe noduri

# 4) Acum executați comanda pentru a instala pachetul Jest în proiectul nou creat folosind comanda de mai jos.

npm install --save-dev jest

Aceasta va instala modulul Jest (precum și dependențele sale).

# 5) Acum, avem un proiect de nod pregătit cu legături Jest. Să configurăm scriptul de testare npm pentru a rula testele Jest, adică atunci când comanda „test npm” este executată, scriptul ar trebui să ruleze toate testele bazate pe cadrul Jest.

Pentru aceasta, actualizați fișierul package.json și adăugați o secțiune de script așa cum se arată mai jos.

'scripts': { 'test': 'jest' }

Fișierul final package.json va arăta așa cum se arată mai jos.

{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

Scrierea testelor pentru o funcție Javascript

În această secțiune, vom crea un cod de funcție Javascript simplu pentru adunarea, scăderea și multiplicarea a 2 numere și vom scrie testele corespunzătoare bazate pe Jest pentru acesta.

Mai întâi, să vedem cum arată codul aplicației (sau funcției) noastre testate.

# 1) În proiectul de nod creat în secțiunea de mai sus, creați un fișier js numit calculator.js cu conținut așa cum se arată mai jos

const mathOperations = { sum: function(a,b) { return a + b; }, diff: function(a,b) { return a - b; }, product: function(a,b) { return a * b } } module.exports = mathOperations

#Două) Acum, creați un fișier de testare în același folder pentru aceste teste, numit calculator.test.js - aceasta este convenția așteptată de cadrul Jest pentru a căuta toate fișierele care conțin teste bazate pe Jest. Vom importa și funcția testată, pentru a executa codul din test.

Așa ar arăta fișierul doar cu importul / cererea declarației.

const mathOperations = require('./calculator');

# 3) Acum, să scriem teste pentru diferite metode în fișierul principal, adică sumă, diferență și produs.

Testele Jest urmează testele stilului BDD, fiecare suită de teste având un bloc principal de descriere și poate avea mai multe blocuri de testare. De asemenea, vă rugăm să rețineți că testele pot avea și blocuri de descriere imbricate.

descărcări gratuite de muzică mp3 pentru mp3 player

Să scriem un test pentru adăugarea a 2 numere și validăm rezultatele așteptate. Vom furniza numerele ca 1 și 2 și vom aștepta ca ieșirea să fie 3.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { expect(mathOperations.sum(1, 2)).toBe(3); }); })

Vă rugăm să consultați punctele de mai jos cu testul de mai sus:

la) Blocul de descriere este o descriere exterioară pentru suita de teste, adică reprezintă un container generic pentru toate testele pe care le vom scrie pentru calculatorul din acest fișier.

b) Apoi, avem un bloc de test individual - acesta reprezintă un singur test. Șirul între ghilimele reprezintă numele testului.

c) Consultați codul din blocul expect - „expect” nu este altceva decât o afirmație. Declarația apelează metoda sumă în funcția testată cu intrările 1 și 2 și se așteaptă ca ieșirea să fie 3.

De asemenea, putem rescrie acest lucru într-un mod mai simplu pentru a-l înțelege mai bine.

Vă rugăm să consultați mai jos, acum am separat funcția de apel și afirmație ca 2 afirmații separate pentru a o face mai succintă.

describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); })

d) Pentru a rula acest test, pur și simplu executați comanda „ test deasupra nivelului mării ”În terminal sau prompt de comandă la locația proiectului.

Veți vedea rezultatul așa cum se arată mai jos.

Rulați comanda „test npm” în terminal - Ieșire

# 4) Să încercăm alte teste.

la) Mai întâi, scrieți un test care nu reușește și vedeți ce rezultat obținem. Să schimbăm rezultatul la o valoare incorectă în același test pe care l-am scris în ultima secțiune. Vedeți cum arată testul.

describe('Calculator tests', () => { test('adding 1 + 2 should return 10', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(10); }); })

Aici ne așteptăm ca o sumă de 1 și 2 să returneze 10, ceea ce este incorect.

Să încercăm să executăm acest lucru și să vedem ce obținem.

ieșire detaliată atunci când un test eșuează

Puteți vedea rezultatul detaliat atunci când un test eșuează, adică ce a fost returnat efectiv și ce era de așteptat și care linie a cauzat eroarea în funcția testată etc.

b) Să scriem mai multe teste pentru celelalte funcții, adică diferența și produsul.

Fișierul de testare cu toate testele va arăta așa cum se arată mai jos.

const mathOperations = require('./calculator'); describe('Calculator tests', () => { test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(1,2) // assert expect(result).toBe(3); }); test('subtracting 2 from 10 should return 8', () => { // arrange and act var result = mathOperations.diff(10,2) // assert expect(result).toBe(8); }); test('multiplying 2 and 8 should return 16', () => { // arrange and act var result = mathOperations.product(2,8) // assert expect(result).toBe(16); }); })

Când testele de mai sus sunt executate, rezultatul dat mai jos este generat.

Testează ieșirea pentru funcții - diferență și produs

Tutorial video: Ce este Jest

Există Matchers

Afirmațiile de glumă folosesc chibrituri pentru a afirma o condiție. Jest folosește chibrituri din așteptatul Api. Documentul API așteptat poate fi menționat Aici.

Să trecem prin unele dintre cele mai utilizate meciuri împreună cu testele Jest.

# 1) Egalitate

Acestea sunt cele mai folosite potrivitoare. Acestea sunt utilizate pentru verificarea egalității sau inegalității și sunt utilizate mai ales pentru operații aritmetice.

Să vedem câteva exemple mai jos:

Aici am scris 2 meciuri folosind toBe și not.toBe care sunt analogi cu egali și nu egali.

test('equality matchers', () => { expect(2*2).toBe(4); expect(4-2).not.toBe(1); })

# 2) Adevăr

Aici vom vedea, potriviri pentru valori nule, false și adevărate, adică valori false și adevărate. Este important să rețineți că orice lucru care nu este logic adevărat este fals.

De exemplu, numărul 0, nul, șirul gol, NaN sunt toate exemple de Javascript falsy w.r.t.

test('truthy operators', () => { var name='Software testing help' var n = null expect(n).toBeNull() expect(name).not.toBeNull // name has a valid value expect(name).toBeTruthy() //fail - as null is non success expect(n).toBeTruthy() // pass - null treated as false or negative expect(n).toBeFalsy() // 0 - treated as false expect(0).toBeFalsy() })

# 3) Numere potrivite

Aceste potrivitoare ar putea fi utilizate pentru operații aritmetice generale.

De exemplu, mai mare decât mai puțin, mai puțin decât, mai mare decât mai puțin sau egal, etc.

Consultați exemplele de mai jos pentru mai multe detalii

test('numeric operators', () => { var num1 = 100; var num2 = -20; var num3 = 0; // greater than expect(num1).toBeGreaterThan(10) // less than or equal expect(num2).toBeLessThanOrEqual(0) // greater than or equal expect(num3).toBeGreaterThanOrEqual(0) })

# 4) Meciuri de șiruri

De multe ori avem nevoie de șiruri pentru a se potrivi cu o expresie regulată ca o afirmație într-un test de unitate. Jest oferă potrivitoare pentru corzi care să fie potrivite cu o expresie regulată.

test('string matchers',() => { var string1 = 'software testing help - a great resource for testers' // test for success match expect(string1).toMatch(/test/); // test for failure match expect(string1).not.toMatch(/abc/) })

Tutorial video: există Matchers

Jest Hooks - Setup and Teardown

La fel ca toate celelalte cadre de testare bazate pe xUnit, cadrul Jest oferă și cârlige pentru metode de configurare și curățare. Aceste metode de cârlig sunt executate înainte și după fiecare test din suita de testare sau înainte și după executarea testSuite.

În total, există 4 cârlige care sunt disponibile pentru utilizare.

  • înainte și după fiecare: Aceste cârlige sunt executate înainte și după fiecare test în suita de teste.
  • beforeAll și afterAll: Aceste cârlige sunt executate o singură dată pentru fiecare suită de teste. adică dacă o suită de testare are 10 teste, atunci aceste cârlige vor fi executate o singură dată pentru fiecare execuție de testare.

Să vedem un exemplu: Vom adăuga aceste cârlige la același exemplu de testare a adunării a 2 numere.

Vom seta intrările înainte de fiecare cârlig pentru ilustrare. Fișierul de testare ar arăta cu cârlige de testare așa cum se arată mai jos.

describe('Calculator tests', () => { var input1 = 0 var input2 = 0 beforeAll(() => { console.log('beforeAll called'); }); afterAll(() => { console.log('afterAll called'); }); beforeEach(() => { console.log('beforeEach called'); input1 = 1; input2 = 2; }); afterEach(() => { console.log('afterEach called'); }); test('adding 1 + 2 should return 3', () => { // arrange and act var result = mathOperations.sum(input1,input2) // assert expect(result).toBe(3); }); })

Sfaturi si trucuri

# 1) Rapoartele din linia de comandă sunt bune, dar nu foarte lizibile. Există biblioteci / module disponibile pentru a genera rapoarte de testare bazate pe HTML pentru testele Jest. Poate fi realizat așa cum se arată mai jos.

cum se creează o nouă listă în java
  • Adăugați pachetul nod pentru jest-html-reporter utilizând comanda de mai jos.
npm install --save-dev jest-html-reporter
  • Acum adăugați configurația Jest pentru reporter în fișierul package.json al proiectului nodului.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Odată configurat acum, executați testele folosind „ test deasupra nivelului mării ”Comanda.
  • Dacă instalarea are succes, ar trebui să puteți vedea un raport bazat pe HTML care se creează în directorul proiectului.

Raport de testare

# 2) Crearea raportului de acoperire a codului: Acoperirea codului este una dintre cele mai importante valori din perspectiva testării unitare. În esență, măsoară ce procent de declarații / sucursale sunt acoperite pentru aplicația testată.

Jest oferă asistență imediată pentru acoperirea codului. Pentru a obține raportul de acoperire Jest, Există configurație trebuie adăugat în pachet.json fişier.

Adăugați configurația așa cum se arată mai jos:

'jest': { 'collectCoverage':true }

Odată ce această configurație este finalizată, încercați să rulați testele folosind comanda „Test peste nivelul mării” , si tu poti consultați detaliile privind acoperirea codului chiar sub rezultatele executării testului, așa cum se arată mai jos.

detalii despre acoperirea codului

Tutorial video: Jest Coverage & HTML Report Generation

Concluzie

În acest tutorial Jest, am parcurs elementele de bază ale cadrului Jest. Am învățat cum să instalăm cadrul Jest și am văzut cum poate fi folosit pentru testarea fișierelor Javascript simple.

De asemenea, am explorat diferitele tipuri de potriviri acceptate de Jest și am acoperit reporterii Html și rapoartele de acoperire a codurilor.

NEXT Tutorial

Lectură recomandată

^