Олександра Донцова 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