Меню

Урок за Jest - Тестване на модули на JavaScript с помощта на Jest Framework

  • Основен
  • Други
  • Урок за Jest - Тестване на модули на JavaScript с помощта на Jest Framework

jest tutorial javascript unit testing using jest framework

Опитайте Нашия Инструмент За Премахване На Проблемите

В този урок за Jest ще научим за различни функции на Jest, Jest Matchers и как да използваме Jest framework за JavaScript Unit Testing:

Jest е Javascript Testing framework, създадена от Facebook.

Той е предназначен предимно за приложения, базирани на React (който също е създаден от Facebook), но може да се използва за писане на сценарии за автоматизация за всяка кодова база, базирана на Javascript.

В този урок за тестване на Jest ще научим за различните характеристики на Jest, неговите съвпадения и ще видим как можем да използваме Jest с пример от край до край. Също така ще проучим относно покритието на кода с помощта на Jest.

Има урок

Списък с уроци в тази серия JEST

Урок # 1: Урок за Jest - Тестване на модули на JavaScript с Jest Framework
Урок # 2: Как да тествате React Apps, използвайки Jest Framework
Урок № 3: Конфигуриране и отстраняване на грешки в Jest Тестове

Какво ще научите:

Първи стъпки с Jest тестване

Някои от предимствата / характеристиките на Jest са дадени по-долу:

  1. Необходима е нулева конфигурация.
  2. Бърз: Тестовете Jest се изпълняват паралелно - това от своя страна значително намалява времето за изпълнение на теста.
  3. Покритие на вградения код: Jest поддържа изчерпателно покритие на кода - това е много полезна метрика за всички CI-базирани тръбопроводи за доставка и цялостната ефективност на теста на даден проект.
  4. Изолирани и изолирани тестове: Всеки тест на Jest работи в своя собствена пясъчна кутия, което гарантира, че няма два теста, които могат да се намесват или въздействат взаимно.
  5. Мощна подигравателна поддръжка: Тестовете Jest поддържат всички видове подигравки - било то функционални подигравки, подигравки с таймер или подигравки на отделни API извиквания.
  6. Подкрепа за тестване на моментни снимки: Тестването на моментни снимки е от значение от гледна точка на React. Jest поддържа заснемане на моментна снимка на реагиращия компонент, който се тества - това може да бъде потвърдено с действителния изход на компонента. Това значително помага за валидиране на поведението на компонента.

Jest Framework за тестване на модули на JavaScript

В този раздел ще видим пример от край до край за писане на тестове, използвайки JEST рамката за проста функция на Javascript. Първо, нека видим как да инсталираме JEST рамката в нашия проект

IS инсталация

Jest е просто възел пакет и може да се инсталира с помощта на всеки мениджър на пакети, базиран на възли. Пример, npm или прежда.

Нека да видим някои примерни команди, които могат да се използват за инсталиране на пакета Jest.

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

За да инсталирате модула Jest глобално, можете просто да използвате флага ‘-g’ заедно с командата npm. Това ще ви позволи да използвате команди Jest директно, без да конфигурирате файла на пакета за npm тестове.

npm install -g jest

Използване на Jest в проект, базиран на възел

За да използвате Jest в проект, базиран на възел, просто използвайте командите от горния раздел, за да инсталирате пакета на възела за Jest.

Следвайте стъпките по-долу, за да създадете проект на възел от самото начало и след това да инсталирате Jest в него.

# 1) Създайте папка / директория с име като име на вашия проект, например , myFirstNodeProject

# две) Сега, използвайки терминала или командния ред, отидете до проекта, създаден в горната стъпка, и изпълнете скрипта за иницииране npm, като използвате командата по-долу.

npm init

# 3) След като горната команда бъде изпълнена, тя ще поиска различни въпроси / параметри.

Например , името на проекта, версията и др. Просто продължете да натискате enter (и приемете стойностите по подразбиране). След като приключите, ще видите файл package.json, създаден във вашия проект. Това е задължителен конфигурационен файл за всеки проект, базиран на възел

# 4) Сега изпълнете командата за инсталиране на пакета Jest в новосъздадения проект, като използвате командата по-долу.

npm install --save-dev jest

Това ще инсталира модула Jest (както и неговите зависимости).

# 5) Сега имаме готов проект на възел с обвързвания на Jest. Нека конфигурираме npm скрипта за тестване, за да стартираме Jest тестовете, т.е. когато се изпълни командата ‘npm test’, скриптът трябва да изпълнява всички тестове, базирани на Jest framework.

За да направите това, актуализирайте файла package.json и добавете раздел със скриптове, както е показано по-долу.

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

Последният файл package.json ще изглежда както е показано по-долу.

team tutorial урок за начинаещи
{ 'name': 'jest-e2e', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'jest' }, 'author': '', 'license': 'ISC', 'dependencies': { 'jest': '^25.1.0' } }

Писане на тестове за Javascript функция

В този раздел ще създадем прост код на функцията на Javascript за събиране, изваждане и умножение на 2 числа и ще напишем съответните Jest базирани тестове за него.

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

# 1) В проекта на възел, създаден в горния раздел, създайте js файл с име calculator.js със съдържание, както е показано по-долу

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

# две) Сега създайте тестов файл в същата папка за тези тестове, наречен calculator.test.js - това е конвенцията, която се очаква от рамката на Jest да търси всички файлове, които съдържат тестове, базирани на Jest. Също така ще импортираме тестваната функция, за да изпълним кода в теста.

Ето как би изглеждал файлът само с декларация за импортиране / изискване.

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

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

Тестовете Jest следват тестове в стил BDD, като всеки тестов пакет има един основен блок за описание и може да има множество тестови блокове. Също така, имайте предвид, че тестовете също могат да имат вложени описателни блокове.

Нека напишем тест за добавяне на 2 числа и потвърдим очакваните резултати. Ще предоставяме числата като 1 и 2 и очакваме изхода като 3.

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

Моля, обърнете се към точките по-долу в теста по-горе:

да се) Блокът за описание е външно описание за тестовия пакет, т.е. той представлява общ контейнер за всички тестове, които ще напишем за калкулатора в този файл.

б) След това имаме индивидуален тестов блок - това представлява един тест. Низът в кавички представлява името на теста.

° С) Обърнете се към кода в очаквания блок - „очаквайте“ не е нищо друго освен твърдение. Операторът извиква метода на сумата в тестваната функция с входове 1 и 2 и очаква изходът да бъде 3.

Можем също да пренапишем това по-опростен начин, за да го разберем по-добре.

кой е най-добрият изтеглящ музика за mp3

Моля, вижте по-долу, сега сме отделили извикването на функцията и твърдение като 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); }); })

д) За да стартирате този тест, просто изпълнете командата “ тест за надморско равнище ”В терминала или командния ред в местоположението на проекта.

Ще видите резултата, както е показано по-долу.

Изпълнете командата “npm test” в терминала - Изход

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

Когато се изпълнят горните тестове, изходът, даден по-долу, се генерира.

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

Видео урок: Какво е Jest

Има Matchers

Твърденията на Jest използват съвпадения, за да отстояват дадено условие. Jest използва мачове от очаквания Api. Очаквайте API документа можете да препращате тук.

Нека да разгледаме някои от най-често използваните мачове заедно с тестовете Jest.

# 1) Равенство

Това са най-често използваните мачове. Те се използват за проверка на равенство или неравенство и се използват най-вече за аритметични операции.

Нека да видим няколко примера по-долу:

Тук сме написали 2 съвпадения, използващи toBe и not.toBe, които са аналогични на equals, а не на equals.

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

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

Тук ще видим, съвпадения за нула, фалш и вяра, т.е. фалшиви и истинни стойности. Важно е да се отбележи, че всичко, което не е логично вярно, е лъжа.

Например, номер 0, null, празен низ, NaN са всички примери за фалшив 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) Съвпадения на числа

Тези съвпадения могат да се използват за общи аритметични операции.

Например, по-голямо, отколкото по-малко, отколкото по-голямо, отколкото по-равно или др.

Проверете примерите по-долу за повече подробности

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) Съвпадения на струни

Много пъти ни трябват низове, за да съвпадат с регулярния израз като твърдение в Unit test. Jest осигурява съвпадения за низове, които да бъдат съпоставени с регулярния израз.

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

Видео урок: Има съвпадения

Jest Hooks - настройка и премахване

Подобно на всички други базирани на xUnit модулни тестови рамки, Jest framework предлага и куки за методи за настройка и почистване. Тези методи на закачане се изпълняват преди и след всеки тест в тестовия пакет или преди и след изпълнението на testSuite.

Общо има 4 куки, които са на разположение за използване.

  • beforeEach и afterEach: Тези куки се изпълняват преди и след всеки тест в тестовия пакет.
  • преди всички и след всички: Тези куки се изпълняват само веднъж за всеки тестов пакет. т.е. ако тестовият пакет има 10 теста, тези куки просто ще бъдат изпълнени веднъж за всяко изпълнение на теста.

Нека да видим пример: Ще добавим тези куки към същия тестов пример за добавяне на 2 числа.

Ще зададем входовете в beforeEach кука за илюстрация. Тестовият файл ще изглежда с тестови куки, както е показано по-долу.

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) Отчетите от командния ред са добри, но не много четими. Налични са библиотеки / модули за генериране на HTML базирани отчети за тестове за Jest тестове. Може да се постигне, както е показано по-долу.

най-добрите безплатни услуги за конферентен разговор
  • Добавете възел пакет за jest-html-reporter, като използвате командата по-долу.
npm install --save-dev jest-html-reporter
  • Сега добавете Jest конфигурация за репортера във файла package.json на проекта на възела.
'jest': { 'reporters': ( 'default', ( './node_modules/jest-html-reporter', { 'pageTitle': 'Test Report' } ) ) }
  • След като конфигурирате сега, изпълнете тестовете, като използвате „ тест за надморско равнище ”Команда.
  • Ако настройката е успешна, трябва да можете да видите Html-базиран отчет, който се създава в директорията на проекта.

Протокол от теста

# 2) Създаване на отчет за покритие на кода: Покритието на кода е един от най-важните показатели от гледна точка на тестването на единици. По същество той измерва какъв процент от изявления / клонове са обхванати за тестваното приложение.

Jest предоставя незабавна поддръжка за покритие на кода. За да получите отчета за покритие на Jest, Има конфигурация трябва да се добави в package.json файл.

Добавете конфигурацията, както е показано по-долу:

'jest': { 'collectCoverage':true }

След като тази конфигурация приключи, опитайте да изпълните тестовете с помощта на командата „Тест над морското равнище“ , и можете вижте подробности за покритието на кода точно под резултатите от изпълнението на теста, както е показано по-долу.

подробности за покритие на кода

Видео урок: Покритие Jest & Генериране на HTML отчети

Заключение

В този урок Jest разгледахме основите на рамката Jest. Научихме как да инсталираме структурата на Jest и видяхме как тя може да се използва за тестване на прости Javascript файлове.

Също така изследвахме различните видове съвпадения, поддържани от Jest, и обхващахме репортери на Html и отчети за покритие на кода.

СЛЕДВАЩ Урок

Препоръчително четене

^