Курс по Jest: Посібник для початківців з тестування в JavaScript

текст перекладу
pic

Тестування є важливою складовою, що забезпечує надійність і стабільність наших додатків. Jest — це потужний фреймворк для тестування JavaScript та TypeScript проєктів. Він швидкий, простий у використанні та має вбудовані функції, такі як мокінг (mocking), тестування знімків (snapshot testing) і покриття коду (code coverage). Цей курс допоможе вам розпочати роботу з Jest, зрозуміти основні концепції та написати свої перші тестові кейси.

Розпочнемо!

Необхідні вимоги

Перед початком переконайтеся, що ви маєте:

  • Базові знання JavaScript (ES6+).
  • Встановлений Node.js на вашій системі.

Встановлення Jest

Давайте почнемо з встановлення Jest у нашому проєкті. Ви можете використовувати будь-який текстовий редактор, але я буду використовувати Visual Studio Code.

Створимо приклад проєкту та ініціалізуємо Node.js:

mkdir jest-demo && cd jest-demo && npm init --yes

Це створить каталог з назвою jest-demo, змінить поточний каталог на нього за допомогою команди cd і ініціалізує його за допомогою npm init --yes.

Щоб встановити Jest, запустимо:

npm install --save-dev jest

Додайте скрипт до вашого файлу package.json, щоб запускати Jest:

// package.json  
...  
"scripts": {  
 "test": "jest"  
},

Готово! Тепер ми можемо запускати наші тести за допомогою команди npm run test. Але не робіть цього поки що. Спочатку нам потрібно написати деякі тести. Давайте зробимо це зараз.

Написання першого тесту:

Створимо два файли: один для основного коду проєкту та інший безпосередньо для тестів. Файл з тестами має відповідати імені основного файлу коду, але містити .test наприкінці. Це дозволяє Jest автоматично виявляти і виконувати тести. Наприклад, ми називатимемо файли getSum.js для основного коду та getSum.test.js для тестів.

Файл з основним кодом містить функцію, що генерує привітання:

//getSum.js  

function getSum(a, b) {  
 return a + b;  
}  
module.exports = getSum;

Тепер ми можемо почати створювати тест для функції додавання. У Jest використовуються функції test() або її синонім it(). Будь-яка з них працює — вони взаємозамінні. Перший параметр — це назва тесту, а другий параметр — це функція, яку потрібно виконати.

test('Що має робити функція під тестом', () => {  
 // очікуваний результат залежно від вхідних даних  
});  

it('Що має робити функція під тестом', () => {  
 // очікуваний результат залежно від вхідних даних  
});

Далі ми описуємо сам тест: по суті ми кажемо, що якщо передати ці аргументи функції, очікуємо цей результат. Ось тут на допомогу приходить функція expect(). Вона приймає очікуване значення як аргумент і повертає об’єкт з методами для тестування, які називаються матчерами (matcher functions). Одним із таких матчингів є метод toBe(), який порівнює своє значення з тим, що передається в expect().

expect(1).toBe(1); // true  
expect(1).toBe(2); // false

Отже, ми можемо передати результат функції getSum() до expect() і порівняти його з очікуваним результатом ось так:

const getSum = require('./getSum');  

test('додає 1 + 2 і має дорівнювати 3', () => {  
 expect(getSum(1, 2)).toBe(3);  
});

Читання результатів тестів:

Коли наші тести готові, ми можемо запустити їх за допомогою команди npm run test:

# результат у консолі  
 PASS ./getSum.test.js  
 ✓ Створює привітання (3ms)  

Test Suites: 1 пройшло, 1 всього  
Тести: 1 пройшло, 1 всього  
Знімки: 0 всього  
Час: 1.747с  
Запущено всі тестові набори.

Слово “PASS” з'являється поряд з назвою файлу тестів, що означає, що наш код успішно пройшов усі тести.
текст перекладу
Тепер давайте подивимося, як виглядає тест, що не пройшов:

Змінімо наш тест для getSum:

const getSum = require('./getSum');  

test('додає 1 + 2 і має дорівнювати 3', () => {  
 expect(getSum(1, 2)).toBe(4);  
});

Запустимо npm run test і подивимося на результат у терміналі:

FAIL ./getSum.test.js  
 × додає 1 + 2 і має дорівнювати 3 (5 ms)  

 ● додає 1 + 2 і має дорівнювати 3   

 expect(received).toBe(expected) // Object.is equality  

 Expected: 4  
 Received: 3  

 2 |  
 3 | test('додає 1 + 2 і має дорівнювати 3', () => {  
 > 4 | expect(getSum(1, 2)).toBe(4);  
 | ^  
 5 | });  

 at Object.toBe (getSum.test.js:4:24)  

Test Suites: 1 не пройшло, 1 всього  
Тести: 1 не пройшло, 1 всього  
Знімки: 0 всього  
Час: 0.588 с, оцінено 1 с  
Запущено всі тестові набори.

Правильно прочитавши результати тестів, ми легко можемо визначити, які помилки сталися і де вони сталися. Це робить їх пошук і виправлення набагато простішими.

Загальні методи тестування:

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

. toBe() використовується для порівняння примітивних значень і посилань на об'єкти:

// pass  
 expect('Очікування').toBe('Очікування');  

 const x = {};  
 const y = x;  
 expect(x).toBe(y);   

 // fail  
 expect('Очікування').toBe('Реальність');  

 const x= {};  
 const y= {};  
 expect(x).toBe(y);

. toEqual() використовується для порівняння об'єктів і масивів:

Коли порівнюємо об'єкти, метод toEqual() гарантує, що результатуючий об'єкт має ті ж самі ключі та відповідні значення, що й очікуваний об'єкт. Якщо об'єкт, який тестується, містить додаткові властивості, яких немає в очікуваному об'єкті, toEqual() ігнорує ці зайві властивості.

Для масивів метод toEqual() перевіряє, чи всі елементи фактичного результату точно співпадають з очікуваними. Однак він вважає відсутні елементи та значення undefined еквівалентними.

// pass  
 expect({ a: undefined, b: 10, c: 'text' }).toEqual({ b: 10, c: 'text' });  

 // fail  
 expect({ a: undefined, b: 10, c: 'text' }).toEqual({ a: 12, b: 10, c: 'text' });

. Метод toStrictEqual() використовується для порівняння об'єктів і масивів з більш строгими критеріями. Фактичний об'єкт або масив повинен точно відповідати очікуваному, включаючи наявність однакових властивостей або елементів без будь-яких пропусків або додаткових елементів. На відміну від toEqual(), метод toStrictEqual() не вважає undefined і відсутні елементи еквівалентними. Наприклад:

// pass  
 expect([1, 2, undefined]).toStrictEqual([1, 2, undefined]);  

 // fail  
 expect([[undefined, 1]]).toStrictEqual([[, 1]])

. toBeTruthy() і toBeFalsy() перевіряють, чи є результат true або false відповідно:

// pass  
 expect(1).toBeTruthy();  
 expect(true).toBeTruthy();  
 expect(undefined).toBeFalsy();  

 // fail  
 expect(null).toBeTruthy();  
 expect(0).toBeTruthy();

. toBeUndefined() і toBeDefined() порівнюють результат з undefined:

// pass  
 expect(1).toBeDefined();  
 expect(null).toBeDefined();  
 expect('рядок').toBeDefined();  

 // fail  
 const x;  
 expect(x).toBeDefined();  
 expect(undefined).toBeDefined();

toBeNull() перевіряє, чи є результат null:

Перекладено з: Jest Crash Course: A Beginner’s Guide to Testing in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *