Meni

Vodič za Jest - JavaScript jedinično testiranje pomoću Jest Framework-a

  • Glavni
  • Ostalo
  • Vodič za Jest - JavaScript jedinično testiranje pomoću Jest Framework-a

jest tutorial javascript unit testing using jest framework

Isprobajte Naš Instrument Za Uklanjanje Problema

najbolji program za praćenje temperature procesora

U ovom Jest tutorialu naučit ćemo o raznim Jestovim značajkama, Jest Matchersima i kako koristiti Jest framework za JavaScript jedinično testiranje:

Jest je Javascript testni okvir koji je izradio Facebook.

Prvenstveno je dizajniran za aplikacije zasnovane na Reactu (koji je također izradio Facebook), ali bi se mogao koristiti za pisanje scenarija automatizacije za bilo koju bazu koda zasnovanu na Javascriptu.

U ovom vodiču za testiranje Jest-a naučit ćemo o raznim značajkama Jesta, njegovim podudarnostima i vidjeti kako možemo koristiti Jest s primjera s kraja na kraj. Također ćemo istražiti pokrivenost kodova pomoću Jesta.

Postoji Vodič

Popis tutorijala u ovoj JEST seriji

Vodič br. 1: Vodič za Jest - JavaScript jedinično testiranje s Jest Frameworkom
Vodič br. 2: Kako testirati reagirajuće aplikacije pomoću Jest Framework-a
Vodič br. 3: Konfiguracija i otklanjanje pogrešaka u Jest testovima

Što ćete naučiti:

Početak rada s Jest testiranjem

Neke od prednosti / značajki Jesta navedene su u nastavku:

  1. Potrebna je nulta konfiguracija.
  2. Brzo: Jest testovi rade paralelno - to zauzvrat uvelike smanjuje vrijeme izvršavanja testa.
  3. Pokrivenost ugrađenim kodom: Jest podržava pokrivenost koda iz kutije - ovo je vrlo korisna mjerna vrijednost za sve cjevovode za isporuku temeljene na CI i ukupnu učinkovitost projekta.
  4. Izolirana ispitivanja i testiranja u zaštićenom prostoru: Svaki test Jest radi u vlastitom pješčaniku, što osigurava da se dva testa ne mogu međusobno ometati ili utjecati.
  5. Moćna podrška za ruganje: Jest testovi podržavaju sve vrste ruganja - bilo da se radi o funkcionalnom ruganju, tajmeru ili pojedinačnim API pozivima.
  6. Podržite testiranje snimka: Snapshot testiranje je relevantno iz perspektive React. Jest podržava snimanje snimke reakcijske komponente koja se ispituje - to može potvrditi stvarnim izlazom komponente. To uvelike pomaže u provjeri ponašanja komponente.

Jest Framework za JavaScript jedinično testiranje

U ovom ćemo odjeljku vidjeti kraj do kraja primjer za pisanje testova pomoću JEST okvira za jednostavnu funkciju Javascripta. Prvo, pogledajmo kako instalirati JEST okvir u naš projekt

Instalacija IS

Jest je jednostavno čvorni paket i može se instalirati pomoću bilo kojeg upravitelja paketa temeljenog na čvorovima. Primjer, npm ili pređe.

Pogledajmo neke primjere naredbi koje se mogu koristiti za instaliranje Jest paketa.

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

Za globalnu instalaciju modula Jest možete jednostavno upotrijebiti zastavicu '-g' zajedno s naredbom npm. To će vam omogućiti da izravno koristite Jest naredbe bez konfiguriranja datoteke paketa za npm testove.

npm install -g jest

Korištenje Jest-a u projektu koji se temelji na čvorovima

Da biste koristili Jest u projektu koji se temelji na čvorovima, jednostavno upotrijebite naredbe iz gornjeg odjeljka za instalaciju paketa čvorova za Jest.

Slijedite korake u nastavku kako biste od početka kreirali projekt čvora i zatim instalirali Jest u njega.

# 1) Stvorite mapu / direktorij s imenom kao imenom vašeg projekta, na primjer , myFirstNodeProject

#dva) Sada pomoću terminala ili naredbenog retka dođite do projekta stvorenog u gornjem koraku i izvršite npm init skriptu pomoću naredbe u nastavku.

npm init

# 3) Jednom kad se izvrši gornja naredba, zatražit će različita pitanja / parametre.

Na primjer , naziv projekta, verzija itd. Jednostavno pritisnite tipku enter (i prihvatite zadane vrijednosti). Nakon dovršetka vidjet ćete datoteku package.json stvorenu u vašem projektu. Ovo je obavezna konfiguracijska datoteka za bilo koji projekt koji se temelji na čvorovima

# 4) Sada izvršite naredbu za instalaciju paketa Jest u novostvoreni projekt pomoću naredbe u nastavku.

npm install --save-dev jest

Ovo će instalirati modul Jest (kao i njegove ovisnosti).

# 5) Sad imamo spreman projekt čvora s Jest vezama. Konfigurirajmo npm test skriptu za pokretanje Jest testova, tj. Kada se izvrši naredba 'npm test', skripta bi trebala izvoditi sve testove temeljene na Jest okviru.

Da biste to učinili, ažurirajte datoteku package.json i dodajte odjeljak skripte kao što je prikazano u nastavku.

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

Konačna datoteka package.json izgledat će kao što je prikazano u nastavku.

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

Pisanje testova za Javascript funkciju

U ovom ćemo odjeljku stvoriti jednostavan Javascript funkcijski kod za zbrajanje, oduzimanje i množenje 2 broja i za njega napisati odgovarajuće testove temeljene na Jestu.

Prvo, pogledajmo kako izgleda kod za našu aplikaciju (ili funkciju) koja se testira.

# 1) U projektu čvora stvorenom u gornjem odjeljku stvorite js datoteku nazvanu calculator.js sa sadržajem kao što je prikazano u nastavku

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

#dva) Sada stvorite testnu datoteku u istoj mapi s tim imenom kalkulator.test.js - ovo je konvencija koju Jest okvir očekuje da traži sve datoteke koje sadrže testove temeljene na Jestu. Također ćemo uvesti funkciju koja se testira, kako bismo izvršili kôd u testu.

Ovako bi datoteka izgledala samo s deklaracijom import / require.

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

# 3) Sada, napišimo testove za različite metode u glavnu datoteku, tj. Zbroj, razlika i proizvod.

Jest testovi slijede testove BDD stila, pri čemu svaki testni paket ima jedan glavni blok opisa i može imati više blokova ispitivanja. Također, imajte na umu da testovi mogu sadržavati i ugniježđene blokove opisa.

Napišimo test za zbrajanje 2 broja i potvrdimo očekivane rezultate. Brojeve ćemo dostavljati kao 1 i 2, a izlaz ćemo očekivati ​​kao 3.

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

Pogledajte donje točke w.r.t gore navedenog testa:

do) Opisni blok je vanjski opis za testni paket, tj. Predstavlja generički spremnik za sve testove koje ćemo napisati za kalkulator u ovoj datoteci.

b) Dalje, imamo pojedinačni testni blok - ovo predstavlja jedan test. Niz u navodnicima predstavlja naziv testa.

c) Pogledajte kod u bloku očekivanja - 'očekivati' nije ništa drugo nego tvrdnja. Izjava poziva metodu zbroja u ispitivanoj funkciji s ulazima 1 i 2 i očekuje da će izlaz biti 3.

To također možemo prepisati na jednostavniji način da bismo to bolje razumjeli.

Pogledajte dolje, sada smo razdvojili poziv funkcije i tvrdnju kao 2 zasebne izjave kako bismo je učinili sažetijom.

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) Da biste pokrenuli ovaj test, jednostavno pokrenite naredbu “ ispitivanje nadmorske visine ”U terminalu ili naredbenom retku na mjestu projekta.

Izlaz ćete vidjeti kako je prikazano dolje.

Pokrenite naredbu

# 4) Pokušajmo s još nekoliko testova.

do) Prvo napišite test neuspjeha i pogledajte kakav ćemo rezultat dobiti. Promijenimo samo rezultat u neku netočnu vrijednost u istom testu koji smo napisali u prošlom odjeljku. Pogledajte kako test izgleda.

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

Ovdje očekujemo zbroj 1 i 2 da bismo dobili 10 što je netočno.

Pokušajmo to izvršiti i vidjeti što ćemo dobiti.

detaljan izlaz kad test nije uspio

Možete vidjeti detaljan izlaz kada test nije uspio, tj. Što je stvarno vraćeno i što se očekivalo i koji je redak uzrokovao pogrešku u funkciji koja se testira itd.

b) Napišimo još testova za ostale funkcije, tj. Razliku i proizvod.

Datoteka testa sa svim testovima izgledat će kao što je prikazano u nastavku.

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

Kada se izvrše gornji testovi, generira se dolje navedeni rezultat.

Izlaz za testove funkcija - razlika i proizvod

Video vodič: Što je Jest

Tu je Matchers

Tvrdnje Jest koriste se podudaranjem da bi potvrdili stanje. Jest koristi podudaranje očekivanog Apija. Može se uputiti na očekivani API dokument ovdje.

Prođimo kroz neke od najčešće korištenih podudaranja zajedno s Jestovim testovima.

# 1) Jednakost

To su najčešće korišteni mečevi. Koriste se za provjeru jednakosti ili nejednakosti, a uglavnom se koriste za računske operacije.

Pogledajmo nekoliko primjera u nastavku:

Ovdje smo napisali 2 podudaranja koristeći toBe i not.toBe koja su analogna jednakima, a ne jednakima.

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

# 2) Istinitost

Ovdje ćemo vidjeti, podudaranja za ništavne, lažne i neistinite, tj. Lažne i istinite vrijednosti. Važno je napomenuti da je sve što logički nije istina lažno.

Na primjer, broj 0, null, prazan niz, NaN su svi primjeri lažnih 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) Podudaranje brojeva

Ta se podudaranja mogu koristiti za opće računske radnje.

Na primjer, većeTan, manjeThan, većeThanOrEqual itd.

Dodatne detalje potražite u donjim primjerima

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) Podudaranje žica

Puno puta trebamo nizove kako bi se podudarali s regularnim izrazom kao tvrdnjom u Unit testu. Jest osigurava podudaranje žica koje se podudaraju s 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 vodič: Postoje podudarnici

Jest Hooks - postavljanje i uklanjanje

Baš kao i svi drugi okviri za jedinstvene testove temeljeni na xUnit-u, Jest framework također nudi kuke za metode postavljanja i čišćenja. Ove se metode zakačenja izvršavaju prije i nakon svakog testa u test paketu ili prije i nakon izvršavanja testSuite.

Ukupno postoje 4 kuke koje su dostupne za upotrebu.

  • beforeEach i afterEach: Te se kuke izvršavaju prije i nakon svakog testa u ispitnom paketu.
  • prije i poslije: Te se kuke izvršavaju samo jednom za svaki testni paket. tj. ako ispitni paket ima 10 testova, tada će se te udice izvršiti samo jednom za svako izvršavanje testa.

Pogledajmo primjer: Dodati ćemo ove kuke na isti testni primjer dodavanja 2 broja.

Postavit ćemo ulaze u beforeEach udicu radi ilustracije. Probna datoteka izgledala bi s kukama za testiranje kako je prikazano u nastavku.

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

savjeti i trikovi

# 1) Izvješća naredbenog retka su dobra, ali ne baš čitljiva. Dostupne su biblioteke / moduli za generiranje HTML testova na temelju Jest testova. To se može postići kao što je prikazano u nastavku.

  • Dodajte paket čvorova za jest-html-reporter pomoću naredbe u nastavku.
npm install --save-dev jest-html-reporter
  • Sada dodajte Jest konfiguraciju za izvjestitelja u datoteku package.json projekta čvora.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Jednom konfigurirani, izvršite testove pomoću ' ispitivanje nadmorske visine ”Naredba.
  • Ako je postavljanje uspješno, trebali biste vidjeti kako se kreira izvješće temeljeno na HTML-u u direktoriju projekta.

Izvještaj o ispitivanju

# 2) Izrada izvještaja o pokrivenosti koda: Pokrivenost koda jedna je od najvažnijih mjernih podataka iz perspektive jedinstvenog testiranja. U osnovi se mjeri koliki je postotak izjava / grana pokriven za aplikaciju koja se testira.

Jest pruža izvanmrežnu podršku za pokrivanje koda. Da biste dobili izvještaj o pokrivenosti Jest-a, Postoji konfiguracija treba dodati u paket.json datoteka.

Dodajte konfiguraciju kao što je prikazano u nastavku:

'jest': { 'collectCoverage':true }

Nakon što je ova konfiguracija gotova, pokušajte pokrenuti testove pomoću naredbe 'Test iznad razine mora' , i možete pogledajte detalje o pokrivanju koda odmah ispod rezultata izvršavanja testa, kao što je prikazano dolje.

pojedinosti o pokrivanju koda

Video vodič: Jest pokrivenost i generiranje HTML izvještaja

Zaključak

U ovom Jest tutorialu prošetali smo kroz osnove Jestovog okvira. Naučili smo kako instalirati Jest framework i vidjeli kako se on može koristiti za testiranje jednostavnih Javascript datoteka.

Također smo istražili različite vrste podudaranja koje podržava Jest te pokrili izvještaje o HTML-u i izvješća o pokrivanju koda.

SLJEDEĆA Vodič

Preporučena literatura

^