Meni

Vadnica za Jest - Testiranje enote JavaScript z uporabo okvira Jest

  • Glavni
  • Drugo
  • Vadnica za Jest - Testiranje enote JavaScript z uporabo okvira Jest

jest tutorial javascript unit testing using jest framework

Preizkusite Naš Instrument Za Odpravo Težav

V tej vadnici za Jest bomo spoznali različne funkcije Jest, Jest Matchers in kako uporabiti ogrodje Jest za testiranje enote JavaScript:

Jest je Javascript preskusno ogrodje, ki ga je izdelal Facebook.

Zasnovan je predvsem za aplikacije React (ki jih je prav tako ustvaril Facebook), vendar se lahko uporabljajo za pisanje scenarijev avtomatizacije za vse kodne baze, ki temeljijo na Javascriptu.

V tej vadnici za testiranje Jest bomo spoznali različne značilnosti Jesta, njegove ujemajoče se točke in videli, kako lahko uporabimo Jest s primerom od konca do konca. Raziskovali bomo tudi pokritost kode z uporabo Jesta.

Obstaja vadnica

Seznam vadnic v tej seriji JEST

Vadnica št. 1: Vadnica za Jest - Preizkušanje enote JavaScript z ogrodjem Jest
Vadnica # 2: Kako preizkusiti aplikacije React z uporabo okvira Jest
Vadnica št. 3: Konfiguracija in razhroščevanje testov, ki temeljijo na Jestu

Kaj se boste naučili:

Uvod v testiranje Jest

Nekatere prednosti / značilnosti Jesta so navedene spodaj:

  1. Potrebna je ničelna konfiguracija.
  2. Hitro: Jest testi se izvajajo vzporedno - to pa močno skrajša čas izvedbe testa.
  3. Pokritost vgrajene kode: Jest podpira pokritost kode že takoj - to je zelo uporabna meritev za vse dobavne cevovode na osnovi CI in splošno preskusno učinkovitost projekta.
  4. Izolirani preskusi in testi v pesku: Vsak test Jest deluje v svojem peskovniku, kar zagotavlja, da noben test ne more vplivati ​​ali vplivati ​​drug na drugega.
  5. Zmogljiva podporna podpora: Jest testi podpirajo vse vrste posmehovanja - najsi gre za funkcionalno posmehovanje, posmehovanje s časovnikom ali posmehovanje posameznih klicev API.
  6. Podprite preskušanje posnetkov: Preskus posnetkov je pomemben z vidika React. Jest podpira zajem posnetka reakcijske komponente, ki se preskuša - to lahko potrdi z dejanskim izhodom komponente. To zelo pomaga pri preverjanju vedenja komponente.

Jest Framework za testiranje enote JavaScript

V tem razdelku bomo videli primer od konca do konca za pisanje testov z uporabo okvira JEST za preprosto funkcijo Javascript. Najprej poglejmo, kako namestiti ogrodje JEST v naš projekt

Namestitev IS

Jest je preprosto vozliščni paket in ga lahko namestite s katerim koli upravljalnikom paketov, ki temelji na vozlišču. Primer, npm ali preje.

Oglejmo si nekaj vzorčnih ukazov, s katerimi lahko namestite paket Jest.

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

Za globalno namestitev modula Jest lahko preprosto uporabite zastavico ‘-g’ skupaj z ukazom npm. To vam bo omogočilo neposredno uporabo ukazov Jest, ne da bi konfigurirali datoteko paketa za preizkuse npm.

npm install -g jest

Uporaba Jesta v projektu, ki temelji na vozlišču

Če želite Jest uporabiti v projektu, ki temelji na vozlišču, preprosto uporabite ukaze iz zgornjega razdelka, da namestite paket vozlišč za Jest.

Sledite spodnjim korakom, da ustvarite projekt vozlišča od začetka in nato vanj namestite Jest.

# 1) Ustvarite mapo / imenik z imenom kot imenom vašega projekta, na primer , myFirstNodeProject

#two) Zdaj s pomočjo terminala ali ukazne vrstice se pomaknite do projekta, ustvarjenega v zgornjem koraku, in z naslednjim ukazom izvedite skript za začetek npm.

npm init

# 3) Ko je zgornji ukaz izveden, bo pozval k drugačnim vprašanjem / parametrom.

Na primer , ime projekta, različica itd. Preprosto pritisnite tipko enter (in sprejmite privzete vrednosti). Po zaključku boste videli datoteko package.json, ustvarjeno v vašem projektu. To je obvezna konfiguracijska datoteka za kateri koli projekt, ki temelji na vozlišču

# 4) Zdaj izvedite ukaz za namestitev paketa Jest v novo ustvarjeni projekt z uporabo spodnjega ukaza.

npm install --save-dev jest

S tem boste namestili modul Jest (in njegove odvisnosti).

# 5) Zdaj imamo pripravljen projekt vozlišča z Jestovimi vezavami. Konfigurirajmo testni skript npm za zagon testov Jest, tj. Ko se izvede ukaz 'test npm', bi moral skript zagnati vse teste, ki temeljijo na Jestu.

Če želite to narediti, posodobite datoteko package.json in dodajte odsek skripta, kot je prikazano spodaj.

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

Končna datoteka package.json bo videti, kot je prikazano spodaj.

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

Pisanje testov za funkcijo Javascript

V tem razdelku bomo ustvarili preprosto kodo funkcije Javascript za seštevanje, odštevanje in množenje dveh števil in za to napisali ustrezne teste, ki temeljijo na Jestu.

Najprej si oglejmo, kako izgleda koda za našo aplikacijo (ali funkcijo), ki je testirana.

# 1) V projektu vozlišča, ustvarjenem v zgornjem razdelku, ustvarite datoteko js z imenom calculator.js z vsebino, kot je prikazano spodaj

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

#two) Zdaj v isti mapi za te teste z imenom ustvarite testno datoteko calculator.test.js - to je dogovor, ki ga pričakuje okvir Jest za iskanje vseh datotek, ki vsebujejo teste, ki temeljijo na Jestu. Uvozili bomo tudi preskusno funkcijo, da bomo lahko izvedli kodo v testu.

Tako bi izgledala datoteka s samo deklaracijo uvoz / zahteva.

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

# 3) Zdaj zapišimo teste za različne metode v glavno datoteko, torej vsoto, razliko in izdelek.

Preskusi Jest sledijo preizkusom sloga BDD, pri čemer ima vsak paket testov en glavni opisni blok in ima lahko več testnih blokov. Upoštevajte tudi, da lahko preskusi vsebujejo tudi ugnezdene bloke z opisi.

Napišimo test za dodajanje 2 števil in potrdimo pričakovane rezultate. Številke bomo podali kot 1 in 2, izhod pa pričakujemo kot 3.

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

Upoštevajte spodnje točke v zgornjem preizkusu:

do) Opisni blok je zunanji opis testne zbirke, tj. Predstavlja splošni vsebnik za vse teste, ki jih bomo napisali za kalkulator v tej datoteki.

b) Nato imamo posamezen testni blok - to predstavlja en test. Niz v narekovajih predstavlja ime testa.

kako odstraniti elemente iz polja Java

c) Glejte kodo v bloku pričakovanja - izraz »pričakovati« ni nič drugega kot trditev. Stavek kliče metodo vsote v preizkušeni funkciji z vhodoma 1 in 2 in pričakuje, da bo izhod 3.

To lahko tudi na preprostejši način prepišemo, da ga bolje razumemo.

Glejte spodaj, zdaj smo funkcijski klic in trditev ločili kot dve ločeni izjavi, da postane bolj jedrnato.

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) Če želite zagnati ta test, preprosto zaženite ukaz “ preskus nadmorske višine ”V terminalu ali ukaznem pozivu na lokaciji projekta.

Videli boste izhod, kot je prikazano spodaj.

V terminalu zaženite ukaz “npm test” - Izhod

# 4) Preizkusimo še nekaj testov.

do) Najprej napišite neuspešen test in poglejte, kakšne rezultate dobimo. Spremenimo le rezultat na neko napačno vrednost v istem testu, ki smo ga zapisali v zadnjem poglavju. Oglejte si, kako izgleda test.

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

Tu pričakujemo vsoto 1 in 2, da dobimo 10, kar ni pravilno.

Poskusimo to izvesti in poglejmo, kaj bomo dobili.

podroben izhod, če test ni uspel

Podroben izhod si lahko ogledate, ko test ni uspel, tj. Kaj je bilo dejansko vrnjeno in kaj je bilo pričakovano ter katera vrstica je povzročila napako v preizkušeni funkciji itd.

b) Zapišimo več testov za druge funkcije, tj. Razliko in izdelek.

Preskusna datoteka z vsemi testi bo videti tako, kot je prikazano spodaj.

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); }); })

Ko se izvedejo zgornji testi, spodaj navedeni rezultat se ustvari.

Rezultati preskusov funkcij - razlike in izdelka

Video vadnica: Kaj je Jest

Tam je Matchers

Trditve Jest s pomočjo tekmovalcev uveljavljajo stanje. Jest uporablja tekme od pričakovanega Apija. Lahko se sklicujete na pričakovani dokument API tukaj.

Sprehodimo se med nekaj najpogosteje uporabljenih tekem skupaj z Jestovimi testi.

# 1) Enakost

To so najpogosteje uporabljene tekme. Uporabljajo se za preverjanje enakosti ali neenakosti in se večinoma uporabljajo za računske operacije.

Oglejmo si nekaj primerov spodaj:

Tu smo napisali 2 ujemanja z uporabo toBe in not.toBe, ki sta analogni enaki in ne enaki.

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

# 2) Resničnost

Tu bomo videli, ujemanja za nične, napačne in neresnične, torej lažne in resnične vrednote. Pomembno je vedeti, da je vse, kar logično ni res, napačno.

Na primer, številka 0, null, prazen niz, NaN so vsi primeri napačnega w.r.t Javascripta.

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) Ujemanje številk

Ta ujemanja bi lahko uporabili za splošne računske operacije.

Na primer, largerThan, lessThan, largerThanOrEqual itd.

Za več podrobnosti si oglejte spodnje primere

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) String Matchers

Velikokrat potrebujemo nize, ki se ujemajo z regularnim izrazom kot trditvijo v testu Unit. Jest ponuja ujemanje nizov, ki se ujemajo z regularnim izrazom.

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/) })

Video vadnica: Obstajajo tekmovalci

Jest Hooks - namestitev in odstranitev

Tako kot vsi drugi okviri za preskušanje enot, ki temeljijo na xUnit, tudi Jest framework ponuja kljuke za nastavitve in metode čiščenja. Te metode kavlja se izvajajo pred in po vsakem preizkusu v testnem paketu ali pred in po izvedbi testSuite.

Na voljo so 4 kljuke, ki so na voljo za uporabo.

  • beforeEach in afterEach: Te kljuke se izvedejo pred in po vsakem preskusu v testnem paketu.
  • beforeAll in afterAll: Te kljuke se izvedejo samo enkrat za vsak testni paket. če ima preskusna zbirka 10 testov, se bodo ti kljuki samo enkrat izvedli za vsako izvedbo preizkusa.

Poglejmo primer: Te kljuke bomo dodali istemu testnemu primeru dodajanja 2 števil.

Za ponazoritev bomo vhode nastavili v pred vsakim kaveljem. Preskusna datoteka bi bila videti s preskusnimi kljukami, kot je prikazano spodaj.

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); }); })

Nasveti in triki

# 1) Poročila ukazne vrstice so dobra, a ne preveč berljiva. Na voljo so knjižnice / moduli za ustvarjanje poročil o preskusih, ki temeljijo na HTML-ju, za teste Jest. To je mogoče doseči, kot je prikazano spodaj.

  • S spodnjim ukazom dodajte paket vozlišča za jest-html-reporter.
npm install --save-dev jest-html-reporter
  • Zdaj dodajte konfiguracijo Jest za poročevalca v datoteko package.json projekta vozlišča.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Ko ste zdaj konfigurirani, izvedite preskuse s pomočjo preskus nadmorske višine ”Ukaz.
  • Če je namestitev uspešna, si lahko ogledate poročilo na osnovi HTML, ki se ustvari v imeniku projekta.

Testno poročilo

# 2) Ustvarjanje poročila o pokritosti kode: Pokritost kode je ena najpomembnejših meritev z vidika preskušanja enot. V bistvu meri, kolikšen odstotek izjav / vej je zajetih za preskušano aplikacijo.

Jest nudi na voljo podporo za pokritost kode. Da bi dobili poročilo o pokritosti Jest, Obstaja konfiguracija je treba dodati v package.json mapa.

Dodajte konfiguracijo, kot je prikazano spodaj:

'jest': { 'collectCoverage':true }

Ko je ta konfiguracija končana, poskusite zagnati teste z ukazom 'Preskus nadmorske višine' in lahko si oglejte podrobnosti o pokritosti kode tik pod rezultati izvedbe testa, kot je prikazano spodaj.

podrobnosti o pokritosti kode

Video vadnica: Jest Coverage & HTML Report Generation

Zaključek

V tej vadnici za Jest smo se sprehodili skozi osnove okvira Jest. Naučili smo se, kako namestiti ogrodje Jest, in videli, kako ga lahko uporabimo za testiranje preprostih datotek Javascript.

Prav tako smo raziskali različne vrste ujemanj, ki jih podpira Jest, in pokrivali poročevalce HTML in poročila o pokritosti kode.

NASLEDNJA Vadnica

Priporočeno branje

^