Meny

Jest-handledning - JavaScript-enhetstestning med Jest Framework

  • Huvud
  • Övrig
  • Jest-handledning - JavaScript-enhetstestning med Jest Framework

jest tutorial javascript unit testing using jest framework

Prova Vårt Instrument För Att Eliminera Problem

I den här Jest-självstudien lär vi oss om olika Jest-funktioner, Jest Matchers, och hur man använder Jest-ramverket för JavaScript Unit Testing:

Jest är ett Javascript Testing-ramverk byggt av Facebook.

Den är främst utformad för React (som också byggs av Facebook) -baserade appar men kan användas för att skriva automatiseringsscenarier för alla Javascript-baserade kodbaser.

I denna Jest-testhandledning kommer vi att lära oss om olika funktioner i Jest, dess matchare och se hur vi kan använda Jest med ett exempel från slut till slut. Vi kommer också att utforska om kodtäckning med Jest.

Det finns en handledning

Lista över handledning i denna JEST-serie

hur man visar en bin-fil

Handledning nr 1: Jest Tutorial - JavaScript-enhetstestning med Jest Framework
Handledning nr 2: Hur man testar reagera appar med Jest Framework
Självstudie 3: Jest-konfiguration och felsökning Jest-baserade tester

Vad du kommer att lära dig:

Komma igång med Jest Testing

Några av fördelarna / funktionerna med Jest ges nedan:

  1. Ingen konfiguration krävs.
  2. Snabb: Jest-tester körs parallellt - detta i sin tur minskar testets utförande tid avsevärt.
  3. Inbyggd kodtäckning: Jest stöder kodtäckning direkt - detta är ett mycket användbart mått för alla CI-baserade leveransrörledningar och övergripande testeffektivitet i ett projekt.
  4. Isolerade och sandlådade tester: Varje Jest-test körs i sin egen sandlåda, vilket säkerställer att inga två tester kan störa eller påverka varandra.
  5. Kraftfullt hånstöd: Jest-tester stöder alla typer av hån - vare sig det är funktionell hån, timerhån eller hån av enskilda API-samtal.
  6. Stöd snapshot testning: Snapshot-testning är relevant ur React-perspektivet. Jest stöder att ta en ögonblicksbild av den reaktorkomponent som testas - detta kan valideras med komponentens faktiska utdata. Detta hjälper till att validera komponentens beteende.

Jest Framework för JavaScript-enhetstestning

I detta avsnitt kommer vi att se ett exempel från slut till slut för att skriva tester med JEST-ramverket för en enkel Javascript-funktion. Låt oss först se hur man installerar JEST-ramverket i vårt projekt

IS Installation

Jest är helt enkelt ett nodpaket och kan installeras med vilken nodbaserad pakethanterare som helst. Exempel, npm eller garn.

Låt oss se några exempel på kommandon som kan användas för att installera Jest-paketet.

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

För att installera Jest-modulen globalt kan du helt enkelt använda flaggan ‘-g’ tillsammans med kommandot npm. Detta gör att du kan använda Jest-kommandon direkt utan att konfigurera paketfilen för npm-tester.

npm install -g jest

Använda Jest i ett nodbaserat projekt

För att använda Jest i ett nodbaserat projekt använder du bara kommandona från avsnittet ovan för att installera nodpaketet för Jest.

Följ stegen nedan för att skapa ett nodprojekt från början och installera sedan Jest i det.

# 1) Skapa en mapp / katalog med ett namn som projektnamn, till exempel , myFirstNodeProject

#två) Nu använder du terminalen eller kommandoraden och navigerar till projektet som skapades i steget ovan och kör npm init-skriptet med kommandot nedan.

npm init

# 3) När kommandot ovan har körts kommer det att fråga om olika frågor / parametrar.

Till exempel , projektets namn, version etc. Håll bara på enter (och acceptera standardvärdena). När du är klar ser du en package.json-fil skapad i ditt projekt. Detta är en obligatorisk konfigurationsfil för alla nodbaserade projekt

# 4) Kör nu kommandot för att installera Jest-paketet i det nyskapade projektet med kommandot nedan.

npm install --save-dev jest

Detta kommer att installera Jest-modulen (liksom dess beroenden).

# 5) Nu har vi ett nodprojekt redo med Jest-bindningar. Låt oss konfigurera npm-testskriptet för att köra Jest-testerna, dvs. när kommandot 'npm-test' körs ska skriptet köra alla Jest-rambaserade tester.

För att göra det, uppdatera filen package.json och lägg till en skriptsektion som visas nedan.

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

Den slutliga package.json-filen ser ut som visas nedan.

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

Skriva tester för en Javascript-funktion

I det här avsnittet skapar vi en enkel Javascript-funktionskod för addition, subtraktion och multiplikation av två nummer och skriver motsvarande Jest-baserade tester för det.

Låt oss först se hur koden för vår applikation (eller funktion) under test ser ut.

# 1) I nodprojektet som skapades i ovanstående avsnitt skapar du en js-fil med namnet calculator.js med innehåll som visas nedan

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

#två) Skapa nu en testfil i samma mapp för dessa tester, namngiven calculator.test.js - detta är den konvention som förväntas av Jest-ramverket att leta efter alla filer som innehåller Jest-baserade tester. Vi importerar också funktionen under test för att köra koden i testet.

Så här ser filen ut med bara import / kravdeklaration.

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

# 3) Nu ska vi skriva tester för olika metoder i huvudfilen, dvs. summa, diff och produkt.

Jest-tester följer BDD-typtester, där varje testsvit har ett huvudbeskrivningsblock och kan ha flera testblock. Observera också att testerna kan ha kapslade beskrivningsblock också.

Låt oss skriva ett test för att lägga till två nummer och validera de förväntade resultaten. Vi kommer att leverera siffrorna som 1 & 2 och förväntar oss att produktionen blir 3.

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

Se nedanstående punkter w.r.t testet ovan:

till) Beskrivningsblocket är en yttre beskrivning för testpaketet, dvs. det representerar en generisk behållare för alla tester som vi ska skriva för miniräknaren i den här filen.

b) Därefter har vi ett enskilt testblock - detta representerar ett enda test. Strängen i citattecken representerar testets namn.

c) Se koden i förväntningsblocket - ”förvänta” är inget annat än ett påstående. Uttalandet kallar summetoden i den funktion som testas med ingångarna 1 & 2 och förväntar sig att utgången ska vara 3.

Vi kan också skriva om det på ett enklare sätt för att förstå det bättre.

Se nedan, nu har vi separerat funktionsanropet och påståendet som två separata uttalanden för att göra det mer kortfattat.

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) För att köra detta test, kör du bara kommandot “ test över havet ”I terminalen eller kommandotolken på projektplatsen.

Du ser utdata som visas nedan.

Kör kommandot

# 4) Låt oss prova några fler tester.

till) Skriv först ett misslyckande test och se vilken effekt vi får. Låt oss bara ändra resultatet till något felaktigt värde i samma test som vi skrev i det senaste avsnittet. Se hur testet ser ut.

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

Här förväntar vi oss en summa av 1 och 2 för att returnera 10 vilket är felaktigt.

Låt oss försöka utföra detta och se vad vi får.

detaljerad utdata när ett test misslyckades

bästa hårddiskrengöraren för Windows 10

Du kan se den detaljerade utdata när ett test misslyckades, dvs vad som faktiskt returnerades och vad som förväntades och vilken linje som orsakade felet i funktionen under test etc.

b) Låt oss skriva fler tester för de andra funktionerna, dvs. skillnad och produkt.

Testfilen med alla tester ser ut som visas nedan.

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

När ovanstående tester utförs, den produktion som anges nedan genereras.

Testar utdata för funktioner - skillnad och produkt

Videohandledning: Vad är skämt

Det finns Matchers

Skämt påståenden använder matchare för att hävda om ett villkor. Jest använder matchare från den förväntade Api. Hänvisa till API-dokumentet kan hänvisas här.

Låt oss gå igenom några av de vanligaste matcharna tillsammans med Jest-tester.

# 1) Jämställdhet

Dessa är de vanligaste matcharna. De används för att kontrollera jämlikhet eller ojämlikhet och används mest för aritmetiska operationer.

Låt oss se några exempel nedan:

Här har vi skrivit två matchare som använder toBe och not.toBe som är analoga med lika och inte lika.

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

# 2) Sanning

Här kommer vi att se, matchare för noll, falsk och sanning, dvs. falska och sanningsvärden. Det är viktigt att notera att allt som inte är logiskt sant är falskt.

Till exempel, nummer 0, null, tom sträng, NaN är alla exempel på falska w.r.t Javascript.

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

Dessa matchare kan användas för allmänna aritmetiska operationer.

Till exempel, greaterThan, lessThan, greaterThanOrEqual, etc.

Kolla nedanstående exempel för mer information

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

Många gånger behöver vi strängar för att matcha ett reguljärt uttryck som ett påstående i ett enhetstest. Jest tillhandahåller matchare för strängar som ska matchas mot ett vanligt uttryck.

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

Videohandledning: Det finns matchare

Jest Hooks - Setup And Teardown

Precis som alla andra xUnit-baserade enhetstestramar, tillhandahåller Jest-ramverk också krokar för installations- och rengöringsmetoder. Dessa krokmetoder körs före och efter varje test i testsviten eller före och efter utförandet av testSuite.

Totalt finns det 4 krokar som är tillgängliga att använda.

  • före och efter varje: Dessa krokar körs före och efter varje test i testsviten.
  • beforeAll och afterAll: Dessa krokar körs bara en gång för varje testsvit. dvs om en testsvit har 10 tester, kommer dessa krokar bara att köras en gång för varje testkörning.

Låt oss se ett exempel: Vi kommer att lägga till dessa krokar i samma testexempel för att lägga till två nummer.

Vi ställer in ingångarna före varje krok för illustration. Testfilen ser ut med testkrokar som visas nedan.

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

tips och tricks

# 1) Kommandoradsrapporterna är bra men inte särskilt läsbara. Det finns bibliotek / moduler tillgängliga för att generera HTML-baserade testrapporter för Jest-tester. Det kan uppnås enligt nedan.

topp 10 musiknedladdare för android
  • Lägg till nodpaket för jest-html-reporter med kommandot nedan.
npm install --save-dev jest-html-reporter
  • Lägg nu till Jest-konfiguration för reportern i filen package.json i nodprojektet.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • När du väl är konfigurerad nu utför du testerna med “ test över havet ”Kommando.
  • Om installationen lyckas bör du kunna se en HTML-baserad rapport som skapas i projektkatalogen.

Testrapport

# 2) Skapa kodtäckningsrapport: Kodtäckning är en av de viktigaste mätvärdena ur ett enhetstestperspektiv. Den mäter i huvudsak vilken procentandel av uttalanden / filialer som täcks för den ansökan som testas.

Jest tillhandahåller omedelbart stöd för kodtäckning. För att få Jest-täckningsrapporten, Det finns konfiguration måste läggas till i package.json fil.

Lägg till konfigurationen enligt nedan:

'jest': { 'collectCoverage':true }

När denna konfiguration är klar, försök att köra testerna med kommandot 'Över havsnivåprov' , och du kan se information om kodtäckning precis nedanför testkörningsresultaten som visas nedan.

information om kodtäckning

Videohandledning: Jest-täckning och HTML-rapportgenerering

Slutsats

I denna Jest-handledning gick vi igenom grunderna i Jest-ramverket. Vi lärde oss att installera Jest-ramverket och såg hur det kan användas för att testa enkla Javascript-filer.

Vi undersökte också olika typer av matchare som stöds av Jest och omfattade Html-reportrar och kodtäckningsrapporter också.

NÄSTA självstudie

Rekommenderad läsning

^