Menu

Výukový program Jest - Testování jednotky JavaScriptu pomocí Jest Framework

  • Hlavní
  • Jiný
  • Výukový program Jest - Testování jednotky JavaScriptu pomocí Jest Framework

jest tutorial javascript unit testing using jest framework

Vyzkoušejte Náš Nástroj Pro Odstranění Problémů

V tomto výukovém programu Jest se dozvíme o různých funkcích Jest, Jest Matchers a o tom, jak používat rámec Jest pro testování jednotek JavaScriptu:

Jest je rámec pro testování Javascriptů vytvořený Facebookem.

Je primárně navržen pro aplikace založené na React (které také vytváří Facebook), ale lze jej použít k psaní scénářů automatizace pro jakékoli databáze založené na Javascript.

V tomto tutoriálu testování Jest se dozvíme o různých funkcích Jestu, jeho srovnávacích programech a uvidíme, jak můžeme použít Jest s příkladem typu end to end. Prozkoumáme také pokrytí kódu pomocí Jest.

K dispozici je výuka

Seznam výukových programů v této sérii JEST

Výukový program č. 1: Výukový program Jest - Testování jednotky JavaScriptu pomocí Jest Framework
Výukový program č. 2: Jak otestovat reakce aplikací pomocí Jest Framework
Výukový program č. 3: Konfigurace Jest a ladění testů založených na Jest

Co se naučíte:

Začínáme s Jest Testováním

Některé z výhod / funkcí Jestu jsou uvedeny níže:

vytvoření makefile c ++
  1. Je nutná nulová konfigurace.
  2. Rychle: Testy Jest probíhají paralelně - to zase výrazně zkracuje dobu provádění testu.
  3. Integrované pokrytí kódu: Jest podporuje kódové pokrytí ihned po vybalení z krabice - to je velmi užitečná metrika pro všechny doručovací kanály založené na CI a celkovou účinnost testu projektu.
  4. Izolované a izolované testy: Každý test Jest běží ve svém vlastním karanténě, což zajišťuje, že žádné dva testy se nemohou vzájemně ovlivňovat nebo ovlivňovat.
  5. Výkonná podpora zesměšňování: Testy Jest podporují všechny typy zesměšňování - ať už jde o funkční zesměšňování, zesměšňování časovače nebo zesměšňování jednotlivých volání API.
  6. Podpora testování snímků: Testování snímků je relevantní z pohledu React. Jest podporuje pořizování snímků testované reakční komponenty - to lze ověřit skutečným výstupem komponenty. To velmi pomáhá při ověřování chování komponenty.

Jest Framework pro testování jednotek JavaScriptu

V této části uvidíme příklad typu end to end pro psaní testů pomocí JEST framework pro jednoduchou funkci Javascript. Nejprve se podívejme, jak nainstalovat rámec JEST do našeho projektu

Instalace IS

Jest je jednoduše balíček uzlů a lze jej nainstalovat pomocí libovolného správce balíčků založeného na uzlech. Příklad, npm nebo příze.

Podívejme se na některé ukázkové příkazy, které lze použít k instalaci balíčku Jest.

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

Pro globální instalaci modulu Jest můžete jednoduše použít příznak „-g“ spolu s příkazem npm. To vám umožní používat příkazy Jest přímo bez konfigurace souboru balíčku pro testy npm.

npm install -g jest

Používání Jest v projektu založeném na uzlech

Chcete-li použít Jest v projektu založeném na uzlech, jednoduše použijte příkazy z výše uvedené části a nainstalujte balíček uzlů pro Jest.

Postupujte podle níže uvedených kroků, abyste vytvořili projekt uzlu od začátku a poté do něj nainstalujte Jest.

# 1) Vytvořte složku / adresář s názvem jako názvem projektu, například , myFirstNodeProject

#dva) Nyní pomocí terminálu nebo příkazového řádku přejděte do projektu vytvořeného ve výše uvedeném kroku a pomocí níže uvedeného příkazu proveďte skript npm init.

npm init

# 3) Po provedení výše uvedeného příkazu se zobrazí výzva k zadání různých otázek / parametrů.

Například , název projektu, verze atd. Jednoduše stiskněte klávesu Enter (a přijměte výchozí hodnoty). Po dokončení uvidíte soubor package.json vytvořený ve vašem projektu. Toto je povinný konfigurační soubor pro jakýkoli projekt založený na uzlech

# 4) Nyní proveďte příkaz k instalaci balíčku Jest do nově vytvořeného projektu pomocí níže uvedeného příkazu.

npm install --save-dev jest

Tím se nainstaluje modul Jest (stejně jako jeho závislosti).

# 5) Nyní máme připravený projekt uzlu s vazbami Jest. Nakonfigurujme testovací skript npm pro spuštění testů Jest, tj. Když je spuštěn příkaz ‚npm ​​test ', měl by skript spustit všechny testy založené na architektuře Jest.

Chcete-li to provést, aktualizujte soubor package.json a přidejte část skriptu, jak je znázorněno níže.

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

Konečný soubor package.json bude vypadat, jak je znázorněno níže.

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

Psaní testů pro funkci Javascript

V této části vytvoříme jednoduchý kód funkce Javascript pro sčítání, odčítání a násobení 2 čísel a zapíšeme pro něj odpovídající testy založené na Jest.

Nejprve se podívejme, jak vypadá testovaný kód naší aplikace (nebo funkce).

# 1) V projektu uzlu vytvořeného ve výše uvedené části vytvořte soubor js s názvem calculator.js s obsahem, jak je znázorněno níže

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) Nyní vytvořte testovací soubor ve stejné složce pro tyto testy s názvem calculator.test.js - toto je konvence očekávaná rámcem Jest hledat všechny soubory, které obsahují testy založené na Jest. Také importujeme testovanou funkci, abychom mohli spustit kód v testu.

Takto by soubor vypadal pouze s deklarací import / vyžadovat.

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

# 3) Nyní si napíšeme testy pro různé metody do hlavního souboru, tj. Součet, rozdíl a součin.

Testy Jest následují testy stylu BDD, přičemž každá testovací sada má jeden hlavní blok popisu a může mít více testovacích bloků. Upozorňujeme také, že testy mohou mít také vnořené bloky pro popis.

Pojďme napsat test pro přidání 2 čísel a ověřit očekávané výsledky. Budeme dodávat čísla jako 1 a 2 a očekávat výstup jako 3.

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

Přečtěte si níže uvedené body s výše uvedeným testem:

na) Blok description je vnější popis pro testovací sadu, tj. Představuje obecný kontejner pro všechny testy, které pro tento kalkulátor v tomto souboru napíšeme.

b) Dále máme individuální testovací blok - to představuje jeden test. Řetězec v uvozovkách představuje název testu.

C) Viz kód v bloku expect - „expect“ není nic jiného než tvrzení. Příkaz volá metodu součtu v testované funkci se vstupy 1 a 2 a očekává, že výstup bude 3.

Můžeme to také přepsat jednodušším způsobem, abychom tomu lépe porozuměli.

Viz níže, nyní jsme oddělili volání funkce a tvrzení jako 2 samostatné příkazy, aby byla stručnější.

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) Chcete-li spustit tento test, jednoduše spusťte příkaz „ zkouška nad hladinou moře ”V terminálu nebo příkazovém řádku v umístění projektu.

Uvidíte výstup, jak je znázorněno níže.

Spusťte příkaz „npm test“ v terminálu - Výstup

# 4) Zkusme několik dalších testů.

na) Nejprve napište neúspěšný test a podívejte se, jaký výstup dostaneme. Pojďme jen změnit výsledek na nějakou nesprávnou hodnotu ve stejném testu, který jsme napsali v poslední části. Podívejte se, jak vypadá 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); }); })

Zde očekáváme, že součet 1 a 2 vrátí 10, což je nesprávné.

Zkusme to provést a uvidíme, co získáme.

podrobný výstup při selhání testu

Můžete vidět podrobný výstup, když selže test, tj. Co se skutečně vrátilo a co se očekávalo a který řádek způsobil chybu v testované funkci atd.

b) Pojďme napsat více testů pro ostatní funkce, tj. Rozdíl a produkt.

Testovací soubor se všemi testy bude vypadat níže.

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

Po provedení výše uvedených testů vygeneruje se níže uvedený výstup.

Výstup testů pro funkce - rozdíl a produkt

Výukový program k videu: Co je žert

K dispozici jsou Matchers

Vtipy Jest používají porovnávače k ​​tvrzení o podmínce. Jest používá srovnávače z očekávaného Api. Lze odkázat na očekávaný dokument API tady.

Pojďme se projít některými z nejčastěji používaných matcherů spolu s testy Jest.

# 1) Rovnost

Jedná se o nejčastěji používané srovnávače. Používají se pro kontrolu rovnosti nebo nerovnosti a většinou se používají pro aritmetické operace.

jaký je klíč zabezpečení sítě?

Níže uvádíme několik příkladů:

Zde jsme napsali 2 porovnávače používající toBe a not.toBe, které jsou analogické k rovným a ne rovným.

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

# 2) Pravdivost

Zde uvidíme shody pro hodnoty null, falsy a truthy, tj. Falešné a pravdivé hodnoty. Je důležité si uvědomit, že vše, co není logicky pravdivé, je falešné.

Například, číslo 0, null, prázdný řetězec, NaN jsou všechny příklady falešného 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) Porovnávače čísel

Tyto srovnávače lze použít pro obecné aritmetické operace.

Například, greaterThan, lessThan, greaterThanOrEqual atd.

Další podrobnosti najdete v níže uvedených příkladech

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) Řetězcové srovnávače

Mnohokrát potřebujeme řetězce, aby odpovídaly regulárnímu výrazu jako tvrzení v testu jednotky. Jest poskytuje porovnávače řetězců, které mají být porovnány s regulárním výrazem.

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

Výukový program k videu: K dispozici jsou porovnávače

Jest Hooks - nastavení a demontáž

Stejně jako všechny ostatní rámce pro testování jednotek založené na xUnit, i Jest framework poskytuje háčky pro metody nastavení a vyčištění. Tyto metody zavěšení se provádějí před a po každém testu v testovací sadě nebo před a po provedení testSuite.

K dispozici jsou celkem 4 háčky.

  • beforeEach a afterEach: Tyto háčky se provádějí před a po každém testu v testovací sadě.
  • beforeAll a afterAll: Tyto háčky jsou provedeny pouze jednou pro každou testovací sadu. tj. pokud má testovací sada 10 testů, pak se tyto háčky provedou pouze jednou pro každé provedení testu.

Podívejme se na příklad: Tyto háčky přidáme ke stejnému testovacímu příkladu přidání 2 čísel.

Pro ilustraci nastavíme vstupy před každým hákem. Testovací soubor by vypadal s testovacími háčky, jak je uvedeno níže.

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

tipy a triky

# 1) Zprávy z příkazového řádku jsou dobré, ale ne příliš čitelné. K dispozici jsou knihovny / moduly pro generování testovacích protokolů založených na HTML pro testy Jest. Toho lze dosáhnout, jak je znázorněno níže.

  • Přidejte balíček uzlů pro jest-html-reportér pomocí níže uvedeného příkazu.
npm install --save-dev jest-html-reporter
  • Nyní přidejte konfiguraci Jest pro reportér do souboru package.json projektu uzlu.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Jakmile je nyní nakonfigurován, proveďte testy pomocí „ zkouška nad hladinou moře ”Příkaz.
  • Pokud je instalace úspěšná, měli byste vidět, jak se v adresáři projektu vytváří zpráva založená na Html.

Protokol o zkoušce

# 2) Vytvoření zprávy o pokrytí kódu: Pokrytí kódu je jednou z nejdůležitějších metrik z hlediska testování jednotky. V podstatě měří, jaké procento výpisů / větví je pokryto pro testovanou aplikaci.

Jest poskytuje out of the box podporu pro pokrytí kódu. Chcete-li získat zprávu o pokrytí Jest, Existuje konfigurace je třeba přidat do balíček.json soubor.

Přidejte konfiguraci, jak je znázorněno níže:

'jest': { 'collectCoverage':true }

Po dokončení této konfigurace zkuste spustit testy pomocí příkazu „Test nad hladinou moře“ , a ty můžeš viz podrobnosti pokrytí kódu těsně pod výsledky provedení testu, jak je uvedeno níže.

podrobnosti o pokrytí kódu

Výukový program s videem: Pokrytí Jest a generování zpráv HTML

Závěr

V tomto tutoriálu Jest jsme prošli základy rámce Jest. Naučili jsme se, jak nainstalovat rámec Jest, a zjistili jsme, jak jej lze použít k testování jednoduchých souborů Javascript.

Prozkoumali jsme také různé typy porovnávačů podporovaných Jestem a zahrnovali jsme také reportéry Html a zprávy o pokrytí kódu.

DALŠÍ výuka

Doporučené čtení

^