Мени

Водич за Јест - ЈаваСцрипт јединствено тестирање помоћу Јест Фрамеворк-а

  • Главни
  • Остало
  • Водич за Јест - ЈаваСцрипт јединствено тестирање помоћу Јест Фрамеворк-а

jest tutorial javascript unit testing using jest framework

Испробајте Наш Инструмент За Елиминисање Проблема

У овом Јест туториалу научићемо о разним Јест функцијама, Јест Матцхерс и како користити Јест фрамеворк за ЈаваСцрипт јединично тестирање:

Јест је Јавасцрипт тест оквир који је направио Фацебоок.

Превасходно је дизајниран за апликације засноване на Реацт-у (које је такође направио Фацебоок), али би се могао користити за писање сценарија аутоматизације за било коју базу кода засновану на Јавасцрипту.

У овом упутству за тестирање Јест-а сазнаћемо о разним карактеристикама Јест-а, његовим подударностима и видећемо како можемо користити Јест са примера од краја до краја. Такође ћемо истражити покривеност кодова користећи Јест.

Постоји Туториал

Списак лекција у овој ЈЕСТ серији

Туториал # 1: Водич за Јест - ЈаваСцрипт јединствено тестирање са Јест Фрамеворк-ом
Туториал # 2: Како тестирати реаговане апликације помоћу Јест Фрамеворк-а
Туториал # 3: Јест конфигурација и отклањање грешака у тестовима заснованим на Јест-у

Шта ћете научити:

Први кораци са Јест тестирањем

Неке од предности / карактеристика Јест-а дате су у наставку:

  1. Потребна је нулта конфигурација.
  2. Брзо: Јест тестови раде паралелно - то заузврат у великој мери смањује време извршавања теста.
  3. Покривеност уграђеним кодом: Јест подржава покривеност шифром из кутије - ово је врло корисна метрика за све доводне системе засноване на ЦИ и укупну ефикасност теста пројекта.
  4. Изоловани тестови и тестови у песку: Сваки Јест тест ради у свом песковитом окружењу, што осигурава да се два теста не могу мешати или утицати једно на друго.
  5. Моћна подршка за ругање: Јест тестови подржавају све врсте ругања - било да се ради о функционалном ругању, тајмеру или појединачним АПИ позивима.
  6. Подршка снапсхот тестирање: Снапсхот тестирање је релевантно из перспективе Реацт-а. Јест подржава снимање снимка реакционе компоненте која се тестира - то може потврдити стварним излазом компоненте. Ово у великој мери помаже у потврђивању понашања компоненте.

Јест Фрамеворк за ЈаваСцрипт јединично тестирање

У овом одељку видећемо пример с краја на крај за писање тестова помоћу ЈЕСТ оквира за једноставну Јавасцрипт функцију. Прво, да видимо како да инсталирамо ЈЕСТ оквир у наш пројекат

Инсталација ИС

Јест је једноставно пакет чворова и може се инсталирати помоћу било ког управитеља пакета заснован на чворовима. Пример, нпм или предива.

Погледајмо неке примере команди које се могу користити за инсталирање Јест пакета.

бесплатна заштита од малвера у реалном времену 2017
yarn add --dev jest npm install --save-dev jest

За глобалну инсталацију модула Јест можете једноставно да користите заставицу ‘-г’ заједно са командом нпм. Ово ће вам омогућити да директно користите Јест наредбе без конфигурисања датотеке пакета за нпм тестове.

npm install -g jest

Коришћење Јест-а у пројекту заснованом на чворовима

Да бисте користили Јест у пројекту заснованом на чворовима, једноставно користите команде из горњег одељка да бисте инсталирали пакет чворова за Јест.

Следите кораке у наставку како бисте од почетка креирали пројекат чвора и затим инсталирали Јест у њега.

# 1) Направите фасциклу / директоријум са именом као именом вашег пројекта, на пример , миФирстНодеПројецт

#два) Сада, користећи терминал или командну линију, идите на пројекат креиран у горњем кораку и извршите нпм инит скрипту помоћу наредбе у наставку.

npm init

# 3) Једном када се изврши горња наредба, затражиће различита питања / параметре.

На пример , назив пројекта, верзија итд. Једноставно притисните тастер ентер (и прихватите подразумеване вредности). Када завршите, видећете датотеку пацкаге.јсон створену у вашем пројекту. Ово је обавезна конфигурациона датотека за било који пројекат заснован на чворовима

# 4) Сада извршите наредбу за инсталирање пакета Јест у новостворени пројекат помоћу наредбе у наставку.

npm install --save-dev jest

Ово ће инсталирати модул Јест (као и његове зависности).

# 5) Сада имамо спреман пројекат чвора са Јест везама. Конфигуришемо нпм тест скрипту за покретање Јест тестова, тј. Када се изврши наредба „нпм тест“, скрипта би требало да покрене све тестове засноване на Јест фрамеворк-у.

Да бисте то урадили, ажурирајте датотеку пацкаге.јсон и додајте одељак скрипте као што је приказано испод.

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

Коначна датотека пацкаге.јсон ће изгледати као што је приказано доле.

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

Писање тестова за Јавасцрипт функцију

У овом одељку ћемо створити једноставан Јавасцрипт функцијски код за сабирање, одузимање и множење 2 броја и за њега написати одговарајуће тестове засноване на Јест-у.

како да репродукујем мкв датотеке

Прво, да видимо како изгледа код за нашу апликацију (или функцију) која се тестира.

# 1) У пројекту чвора креираном у горњем одељку креирајте јс датотеку названу цалцулатор.јс са садржајем као што је приказано доле

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

#два) Сада креирајте тест датотеку у истој фасцикли за ове тестове, названу калкулатор.тест.јс - ово је конвенција коју очекује Јест фрамеворк да тражи све датотеке које садрже тестове засноване на Јест-у. Такође ћемо увести функцију која се тестира, како бисмо извршили код у тесту.

Овако би датотека изгледала само са декларацијом импорт / рекуире.

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

# 3) Хајде сада да напишемо тестове за различите методе у главну датотеку, тј. Суму, разлику и производ.

Јест тестови прате тестове БДД стила, при чему сваки тестни пакет има један главни блок за опис и може имати више блокова за тестирање. Такође, имајте на уму да тестови могу садржати и угнежђене блокове описа.

Напишимо тест за сабирање 2 броја и потврдимо очекиване резултате. Бројеве ћемо давати као 1 и 2, а излаз ћемо очекивати као 3.

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

Погледајте доле наведене тачке у претходном тесту:

до) Описни блок је спољни опис за тестни пакет, тј. Представља генерички контејнер за све тестове које ћемо написати за калкулатор у овој датотеци.

б) Даље, имамо појединачни блок теста - ово представља један тест. Низ у наводницима представља име теста.

ц) Погледајте код у блоку очекивања - „очекивати“ није ништа друго до тврдња. Изјава позива методу збира у тестираној функцији са улазима 1 и 2 и очекује да ће излаз бити 3.

Ово такође можемо преписати на једноставнији начин да бисмо то боље разумели.

Молимо погледајте доле, сада смо раздвојили позив функције и тврдњу као 2 одвојене изјаве да би били сажетији.

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

д) Да бисте покренули овај тест, једноставно покрените команду „ тест надморске висине ”У терминалу или командној линији на локацији пројекта.

Видећете излаз као што је приказано доле.

Покрените наредбу „нпм тест“ на терминалу - Излаз

# 4) Пробајмо још неколико тестова.

до) Прво напишите тест неуспеха и погледајте шта ћемо добити. Само променимо резултат на неку нетачну вредност у истом тесту који смо написали у последњем одељку. Погледајте како тест изгледа.

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

Овде очекујемо зброј 1 и 2 да би вратили 10, што је нетачно.

Покушајмо да извршимо ово и да видимо шта ћемо добити.

детаљан излаз када тест не успе

Можете видети детаљан излаз када тест није успео, тј. Шта је стварно враћено и шта се очекивало и која линија је узроковала грешку у функцији која се тестира итд.

б) Напишимо још тестова за остале функције, тј. Разлику и производ.

Датотека теста са свим тестовима ће изгледати као што је приказано у наставку.

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

Када се изврше горњи тестови, излаз дат у наставку се генерише.

Излаз за тестове функција - разлика и производ

Видео водич: Шта је Јест

Постоји Матцхерс

Јест-ове тврдње користе подударање да би се потврдило стање. Јест користи мечеве од очекиваног Апија. Очекује се АПИ документ овде.

Прођимо кроз неке од најчешће коришћених подударања заједно са Јест тестовима.

# 1) Једнакост

То су најчешће коришћени мечеви. Користе се за проверу једнакости или неједнакости и углавном се користе за рачунске операције.

Да видимо неке примере у наставку:

Овде смо написали 2 подударања користећи тоБе и нот.тоБе који су аналогни једнаким, а не једнаким.

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

# 2) Истинитост

Овде ћемо видети подударања за ништавне, лажне и истините, тј. Лажне и истините вредности. Важно је напоменути да је све што логички није тачно лажно.

На пример, број 0, нула, празан низ, НаН су сви примери нетачности в.р.т Јавасцрипт.

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) Подударање бројева

Ова подударања би се могла користити за опште рачунске операције.

На пример, већеТан, мањеТхан, већеТханОрЕкуал итд.

За више детаља погледајте доње примере

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) Стринг Матцхерс

Пуно пута су нам потребни низови који се подударају са регуларним изразом као тврдњом у Унит тесту. Јест обезбеђује подударање жица које се подударају са регуларним изразом.

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

Видео лекција: Постоје подударници

Јест Хоокс - постављање и уклањање

Баш као и сви други оквири за јединствене тестове засновани на кУнит-у, и Јест фрамеворк такође нуди куке за методе подешавања и чишћења. Ове методе закачења се извршавају пре и после сваког теста у скупу тестова или пре и после извршавања тестСуите.

Укупно постоје 4 куке које су доступне за употребу.

  • бефореЕацх и афтерЕацх: Ове куке се извршавају пре и после сваког теста у скупу за тестирање.
  • пре и после и за све: Ове куке се извршавају само једном за сваки тест пакет. тј. ако тестни пакет има 10 тестова, тада ће се ове куке извршити само једном за свако извршавање теста.

Погледајмо пример: Ове куке ћемо додати истом тестном примеру додавања 2 броја.

Улоге ћемо поставити за пре илустрације пре сваке куке. Пробна датотека би изгледала са тест кукама као што је приказано доле.

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

савети и Трикови

# 1) Извештаји из командне линије су добри, али не баш читљиви. На располагању су библиотеке / модули за генерисање ХТМЛ извештаја о тестовима за Јест тестове. То се може постићи као што је приказано у наставку.

алати који се користе у аналитици великих података
  • Додајте пакет чворова за јест-хтмл-репортер помоћу наредбе у наставку.
npm install --save-dev jest-html-reporter
  • Сада додајте Јест конфигурацију за извештача у датотеку пацкаге.јсон пројекта чвора.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • Једном конфигурисани, извршите тестове помоћу „ тест надморске висине ”Наредба.
  • Ако је подешавање успешно, требало би да видите извештај заснован на ХТМЛ-у који се креира у директоријуму пројекта.

Тест извештај

# 2) Израда извештаја о покривености кода: Покривеност кода је једна од најважнијих метрика из перспективе јединственог тестирања. У основи се мери колики је проценат изјава / огранака обухваћен апликацијом која се тестира.

Јест нуди готову подршку за покривање кода. Да бисте добили извештај о покривености Јест-а, Постоји конфигурација треба додати у пацкаге.јсон датотека.

Додајте конфигурацију као што је приказано доле:

'jest': { 'collectCoverage':true }

Када је ова конфигурација завршена, покушајте да покренете тестове помоћу наредбе „Тест изнад нивоа мора“ , и можете погледајте детаље о покривености кода одмах испод резултата извршавања теста, као што је приказано доле.

детаље о покривању кода

Видео лекције: Јест покривеност и генерација ХТМЛ извештаја

Закључак

У овом Јест туториалу смо прошетали кроз основе Јест оквира. Научили смо како да инсталирамо Јест фрамеворк и видели како се он може користити за тестирање једноставних Јавасцрипт датотека.

Такође смо истражили различите врсте подударања које подржава Јест и покрили извештаче о ХТМЛ-у и извештаје о покривању кода.

СЛЕДЕЋА Лекција

Препоручено читање

^