Меню

Підручник Jest - модульне тестування JavaScript за допомогою Jest Framework

  • Головна
  • Інший
  • Підручник Jest - модульне тестування JavaScript за допомогою Jest Framework

jest tutorial javascript unit testing using jest framework

Спробуйте Наш Інструмент Для Усунення Проблем

У цьому підручнику Jest ми дізнаємося про різні функції Jest, Jest Matchers та про те, як використовувати фреймворк Jest для тестування модулів JavaScript:

Jest - це фреймворк для тестування Javascript, створений Facebook.

Він в основному розроблений для програм на основі React (який також розробляє Facebook), але може бути використаний для написання сценаріїв автоматизації для будь-яких кодових баз на основі Javascript.

У цьому навчальному посібнику з тестування Jest ми дізнаємося про різні особливості Jest, його збіги та побачимо, як ми можемо використовувати Jest з наскрізного прикладу. Ми також вивчимо покриття коду за допомогою Jest.

Існує навчальний посібник

Список підручників у цій серії JEST

Підручник No1: Підручник Jest - модульне тестування JavaScript за допомогою Jest Framework
Підручник No2: Як протестувати програми React за допомогою Jest Framework
Підручник No3: Конфігурація Jest та налагодження тестів на основі 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 - це просто пакет вузлів, який можна встановити за допомогою будь-якого диспетчера пакетів на основі вузлів. Приклад, нпм або пряжі.

Давайте подивимось кілька зразків команд, які можна використовувати для встановлення пакета 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 буде виглядати, як показано нижче.

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

Будь ласка, зверніться до наведених нижче пунктів під час тесту вище:

до) Блок опису є зовнішнім описом для набору тестів, тобто він представляє загальний контейнер для всіх тестів, які ми збираємося написати для калькулятора в цьому файлі.

б) Далі ми маємо індивідуальний блок тесту - це являє собою єдиний тест. Рядок у лапках представляє назву тесту.

в) Зверніться до коду в блоці очікування - „очікувати” - це не що інше, як твердження. Оператор викликає метод sum в тестованій функції з входами 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); }); })

г) Для запуску цього тесту просто запустіть команду “ випробування над рівнем моря ”У терміналі або командному рядку в місці проекту.

Ви побачите результат, як показано нижче.

Запустіть команду “npm test” у терміналі - Output

# 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

Є матчери

Твердження Jest використовують збіги, щоб стверджувати про стан. Джест використовує матчі від очікуваного Апі. На документ очікуваного API можна посилатися тут.

Давайте пройдемося до деяких найбільш часто використовуваних матчів разом із тестами Jest.

# 1) Рівність

Це найчастіше використовувані збігання. Вони використовуються для перевірки рівності або нерівності і в основному використовуються для арифметичних дій.

Давайте розглянемо кілька прикладів нижче:

Тут ми написали 2 збіги з використанням toBe і not.toBe, які є аналогами рівних, а не рівних.

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

# 2) Правдивість

Тут ми побачимо, що відповідають нулю, хибності та істинності, тобто неправдивим і істинним значенням. Важливо зазначити, що все, що не відповідає логіці, є хибністю.

Наприклад, число 0, нуль, порожній рядок, 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) Збіги чисел

Ці збіги можна використовувати для загальних арифметичних операцій.

Наприклад, većeThan, lessThan, largerThanOrEqual тощо.

Щоб дізнатися більше, перегляньте наведені нижче приклади

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-тесті. 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) Звіти командного рядка хороші, але не дуже читабельні. Існують бібліотеки / модулі, доступні для створення звітів про тестування Jest на основі HTML. Цього можна досягти, як показано нижче.

  • Додайте пакет вузлів для 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 та звіти про покриття коду.

НАСТУПНИЙ підручник

Рекомендована література

^