Олександра Донцова Front-end Developer у Sigma Software, Викладач Комп'ютерної школи Hillel.

Тестування є невід'ємною частиною розробки програмного забезпечення, яка допомагає виявити та усунути помилки та недоліки у вашому коді.

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

Чому потрібно тестувати код?

Тестування допомагає забезпечити правильну роботу коду в різних умовах та ситуаціях. Ось декілька причин, чому важливо тестувати ваш JavaScript-код:

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

Типи тестів

У тестуванні JavaScript-коду існують кілька типів тестів, які допомагають перевірити різні аспекти функціональності вашого додатку:

Unit-тести: перевіряють окремі компоненти вашого коду (функції, класи тощо) на правильність роботи. Вони дозволяють ізолювати окремі частини коду для тестування.

Фреймворки для тестування

Для тестування JavaScript-коду існують різні фреймворки та бібліотеки, які допомагають створювати та запускати тести.

Один із найпоширеніших фреймворків — Jest.

function add(a, b) {
  return a + b;
}

test('add should work correctly', () => {
  expect(add(2, 3)).toBe(5);
});

У цьому прикладі ми використали функцію test з Jest для визначення тесту, а expect — для перевірки результату.

Приклади тестування асинхронного коду

Тестування асинхронних функцій також дуже важливе. Наприклад, для функції, яка завантажує дані з сервера:

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

Тепер ми можемо написати тест для цієї функції, використовуючи функцію async:

test('function fetchData should return right data', async () => {
  const fakeData = { value: 42 };
  global.fetch = jest.fn().mockResolvedValue({
    json: jest.fn().mockResolvedValue(fakeData)
  });

  const data = await fetchData();
  expect(data).toEqual(fakeData);
});

Тестування функції з обробкою умов

Припустимо, у нас є проста функція, яка перевіряє, чи є число парним:

function isEven(number) {
  return number % 2 === 0;
}

Ми можемо написати тест для цієї функції, перевіряючи різні умови:

test('function isEven should return true for even numbers', () => {
  expect(isEven(2)).toBe(true);
  expect(isEven(4)).toBe(true);
  expect(isEven(10)).toBe(true);
});

test('function isEven should return false for odd numbers', () => {
  expect(isEven(3)).toBe(false);
  expect(isEven(7)).toBe(false);
  expect(isEven(11)).toBe(false);
});

Тестування класу

Якщо у нас є клас, наприклад, для представлення користувачів, ми можемо написати тести для різних його методів:

class User {
  constructor(name) {
    this.name = name;
    this.points = 0;
  }

  addPoints(amount) {
    this.points += amount;
  }

  deductPoints(amount) {
    if (this.points >= amount) {
      this.points -= amount;
    } else {
      throw new Error('Недостатньо балів');
    }
  }
}

test('method addPoints should add points correctly', () => {
  const user = new User('John');
  user.addPoints(50);
  expect(user.points).toBe(50);
});

test('method deductPoints should downgrade points correctly', () => {
  const user = new User('Jane');
  user.points = 100;
  user.deductPoints(30);
  expect(user.points).toBe(70);
});

test('method deductPoints should generate error, if points not enough', () => {
  const user = new User('Alice');
  user.points = 20;
  expect(() => user.deductPoints(30)).toThrow('Недостатньо балів');
});

Тестування обробки помилок

Тестування обробки помилок допомагає переконатися, що ваш код правильно реагує на непередбачувані ситуації.

Нижче приведена функція, яка ділить два числа:

function divide(a, b) {
  if (b === 0) {
    throw new Error('Ділення на нуль заборонено');
  }
  return a / b;
}

Тепер ми можемо написати тест для перевірки генерації помилки при діленні на нуль:

test('function divide should generate error when dividing by zero', () => 
  expect(() => divide(10, 0)).toThrow('Ділення на нуль заборонено');
});

Отже, тестування JavaScript-коду є ключовим етапом у розробці програмного забезпечення. В даній статті ми розглянули основні поняття тестування, типи тестів та приклади використання фреймворку Jest для створення тестів.

Ми дізналися, що тестування допомагає виявляти помилки на ранніх етапах розробки, забезпечує впевненість у функціональності коду та допомагає зберігати стабільність додатку під час змін. Ми розглянули три основних типи тестів: Unit-тести для перевірки окремих компонентів, Integration-тести для взаємодії між компонентами та End-to-End (E2E) тести для перевірки роботи додатку в цілому.

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

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

Регулярне створення та запуск тестів допоможе вам забезпечити якість, надійність та стабільність вашого JavaScript-додатку.

Основи тестування коду на JavaScript