Тестирование JavaScript: с чего начать новичку в 2024

Почему тестирование JavaScript — это не страшно, а полезно?

Когда я только начинал писать на JavaScript, мне казалось, что тестирование — это что-то из разряда высшей магии. «Зачем? Я же и так вижу, что код работает!» — думал я. А потом наступал понедельник, я добавлял одну маленькую функцию, и всё ломалось. Знакомо?

Тестирование JavaScript — это как страховка для вашего кода. Вы пишете его один раз, а проверяете работу сотни раз автоматически. И поверьте, когда ваш проект вырастет до 10 000 строк кода, вы скажете спасибо тому, кто заставил вас написать первый тест.

В этой статье я расскажу, с чего начать тестирование JavaScript новичку, покажу реальные примеры и дам готовые шаблоны. Вы удивитесь, но первые тесты можно написать уже через 15 минут.

Виды тестов: что нужно знать новичку

Прежде чем писать код, давайте разберёмся с теорией. Всего существует три основных уровня тестирования, но для старта нам нужен только один.

Юнит-тесты (Unit tests)

Это тесты для самых маленьких кусочков кода — функций, методов, классов. Они проверяют: «Работает ли эта конкретная функция так, как я задумал?». Unit тесты JavaScript — это база, с которой начинают все.

Интеграционные тесты (Integration tests)

Проверяют, как разные части системы дружат друг с другом. Например, работает ли связка «форма → отправка данных → ответ сервера».

E2E-тесты (End-to-End)

Самые сложные. Имитируют действия реального пользователя: клики, заполнение форм, переходы по страницам. Для новичка — это уже следующий уровень.

Для старта вам достаточно освоить юнит-тесты. Всё остальное придёт с опытом.

Инструменты: что выбрать новичку?

Рынок инструментов для тестирования JavaScript огромен. Но я выделю три связки, которые реально использовать начинающим:

• Jest — самый популярный фреймворк. Работает «из коробки», не требует сложной настройки. Идеален для старта.
• Mocha + Chai — классика. Mocha запускает тесты, Chai даёт удобные функции для проверок (assertions).
• Vitest — современный и быстрый, почти как Jest, но для проектов на Vite.

Я рекомендую начинать с Jest. Он интуитивно понятен, у него отличная документация и огромное сообщество. Если вы освоите Jest, перейти на другие инструменты будет легко.

Пишем первый тест: пошаговый гайд

Давайте напишем реальный код. Предположим, у нас есть простая функция, которая складывает два числа:

// math.js
function add(a, b) {
  return a + b;
}

module.exports = add;

Теперь установим Jest. Откройте терминал в папке проекта и выполните:

npm init -y
npm install --save-dev jest

Добавьте в package.json скрипт для запуска тестов:

"scripts": {
  "test": "jest"
}

Создайте файл math.test.js в той же папке. Напишем тест:

// math.test.js
const add = require('./math');

test('складывает 2 + 3 и получает 5', () => {
  expect(add(2, 3)).toBe(5);
});

test('складывает отрицательные числа', () => {
  expect(add(-1, -1)).toBe(-2);
});

test('складывает ноль', () => {
  expect(add(0, 0)).toBe(0);
});

Запустите тесты командой npm test. Если всё сделано правильно, вы увидите зелёные галочки. Поздравляю, вы только что написали свой первый тест JavaScript!

Как тестировать более сложные функции?

Хорошо, складывать числа мы научились. А что, если функция работает с массивами или объектами? Давайте разберём пример посложнее.

Функция фильтрации пользователей по возрасту:

// users.js
function filterAdults(users) {
  return users.filter(user => user.age >= 18);
}

module.exports = filterAdults;

Тест для неё:

// users.test.js
const filterAdults = require('./users');

test('возвращает только совершеннолетних', () => {
  const users = [
    { name: 'Анна', age: 17 },
    { name: 'Иван', age: 22 },
    { name: 'Мария', age: 18 }
  ];
  
  const result = filterAdults(users);
  
  expect(result).toHaveLength(2);
  expect(result[0].name).toBe('Иван');
  expect(result[1].name).toBe('Мария');
});

test('возвращает пустой массив, если нет совершеннолетних', () => {
  const users = [
    { name: 'Петя', age: 12 },
    { name: 'Оля', age: 15 }
  ];
  
  expect(filterAdults(users)).toEqual([]);
});

Обратите внимание: для сравнения массивов и объектов мы используем toEqual, а не toBe. toBe проверяет точное совпадение ссылок, а toEqual — содержимое.

Распространённые ошибки новичков

Я собрал топ-5 ошибок, которые допускают начинающие при написании тестов на JavaScript:

• Тестирование всего подряд. Не нужно тестировать тривиальные вещи вроде геттеров и сеттеров.
• Слишком сложные тесты. Один тест — одна проверка. Не пишите «километровые» тесты.
• Забывают про граничные случаи. Что будет, если передать null? undefined? Пустой массив?
• Игнорирование асинхронности. JavaScript асинхронен, и тесты это должны учитывать.
• Нет изоляции. Тесты не должны зависеть друг от друга.

Асинхронные тесты: не бойтесь async/await

Рано или поздно вам понадобится тестировать функции, которые работают с API, базами данных или таймерами. Вот как это делается в Jest:

// api.js
async function fetchUser(id) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

module.exports = fetchUser;

Тест для асинхронной функции:

// api.test.js
const fetchUser = require('./api');

test('возвращает данные пользователя', async () => {
  const user = await fetchUser(1);
  
  expect(user).toHaveProperty('id', 1);
  expect(user).toHaveProperty('name');
});

test('обрабатывает ошибку при неверном ID', async () => {
  await expect(fetchUser(9999)).rejects.toThrow('User not found');
});

Ви