Вы когда-нибудь правили одну строчку в коде, а потом весь сайт падал? Или выкладывали обновление, а пользователи писали, что кнопка не работает? Знакомо. Тестирование — это как страховка. Сначала кажется, что оно только мешает, а потом понимаешь: без него никуда. Сегодня поговорим о Jest — самом популярном инструменте для тестирования JavaScript. Я покажу на примерах, как писать тесты, и объясню, почему это не больно, а полезно.

Что такое Jest и зачем он нужен

Jest — это фреймворк для тестирования JavaScript-кода. Его сделали в Facebook, и сейчас он используется в тысячах проектов. Представьте, что вы повар. Вы готовите блюдо, но перед подачей пробуете его — солите, перчите, проверяете, не подгорело ли. Вот Jest — это ваш дегустатор. Он запускает код, проверяет, работает ли он так, как задумано, и сообщает, если что-то пошло не так.

Jest умеет:

  • Запускать тесты автоматически
  • Проверять, возвращает ли функция правильный результат
  • Имитировать браузерное окружение (например, работу с DOM)
  • Следить за покрытием кода (какие строки кода протестированы)

Если вы пишете на JavaScript, Jest — ваш друг. Он прост в настройке и работает «из коробки».

Как установить Jest и написать первый тест

Установка Jest — дело пары минут. Вам понадобится Node.js и npm (или yarn). Откройте терминал и выполните команду:

npm install --save-dev jest

Теперь создайте файл sum.js с простой функцией:

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

А рядом файл sum.test.js — это и будет наш тест:

const sum = require('./sum');
test('сложение 1 + 2 равно 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Запустите тест командой npx jest. Если всё хорошо, вы увидите зелёную строку: «PASS». Если нет — красную с описанием ошибки. Поздравляю, вы только что написали свой первый тест!

Основные функции Jest: describe, it, expect

Jest использует три ключевых слова: describe, it (или test) и expect. Разберём их на примере.

describe — это группа тестов. Например, вы тестируете калькулятор. Можно объединить все тесты для сложения в один блок.

it (или test) — отдельный тест. Внутри него вы описываете, что должно произойти.

expect — это утверждение. Вы говорите: «Я ожидаю, что результат функции будет таким-то».

Пример:

describe('Калькулятор', () => {
  it('должен складывать два числа', () => {
    expect(sum(2, 3)).toBe(5);
  });
  it('должен вычитать числа', () => {
    expect(subtract(5, 2)).toBe(3);
  });
});

Jest предоставляет множество «матчеров» — способов проверки. Вот самые популярные:

МатчерЧто проверяетПример
toBeТочное равенство (для примитивов)expect(2 + 2).toBe(4)
toEqualГлубокое равенство (для объектов)expect({a: 1}).toEqual({a: 1})
toBeTruthyЗначение истинноexpect(true).toBeTruthy()
toBeFalsyЗначение ложноexpect(false).toBeFalsy()
toContainМассив содержит элементexpect([1,2,3]).toContain(2)

Это база. С их помощью можно проверить почти всё.

Тестирование асинхронного кода и моков

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

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

Чтобы не обращаться к реальному серверу, используем mock (заглушку). Это как тренажёр для кода: вы имитируете ответ сервера.

jest.mock('./api');
const { fetchUser } = require('./api');
fetchUser.mockResolvedValue({ id: 1, name: 'Иван' });
test('получение пользователя', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Иван');
});

Асинхронные тесты пишутся с async/await или с использованием колбэка done. Jest ждёт, пока промис завершится, и только потом проверяет результат.

Правило: Если тест работает с асинхронным кодом, всегда возвращайте промис или используйте async/await. Иначе Jest может закончить тест до того, как асинхронная операция выполнится, и вы получите ложный успех.

Тестирование React-компонентов с Jest

Jest часто используют вместе с React. Для этого нужна библиотека @testing-library/react. Она позволяет «отрендерить» компонент в виртуальном DOM и проверить, что он отображается правильно.

Пример простого теста для компонента Button:

import { render, screen } from '@testing-library/react';
import Button from './Button';
test('кнопка отображает текст', () => {
  render();
  expect(screen.getByText('Нажми меня')).toBeInTheDocument();
});

Здесь мы проверяем, что текст «Нажми меня» появился на странице. Если компонент сложный, можно имитировать клики, ввод данных, проверять состояние. Jest + Testing Library — стандарт для React-проектов.

Практические советы по написанию тестов

Тестирование — это навык. Вот несколько лайфхаков, которые помогут не превратить тесты в мучение:

  • Пишите тесты сразу. Не откладывайте на потом. Если код написан, а тестов нет, вы вряд ли вернётесь к ним.
  • Тестируйте поведение, а не реализацию. Не проверяйте внутренние переменные функции. Проверяйте, что функция возвращает правильный результат.
  • Не пишите тесты для всего подряд. Сосредоточьтесь на критически важных частях: бизнес-логика, API, сложные вычисления.
  • Используйте coverage. Команда npx jest --coverage покажет, какие строки кода покрыты тестами. Стремитесь к 80% и выше, но не гонитесь за 100%.
Лайфхак: Запускайте тесты перед каждым коммитом. Настройте pre-commit hook с помощью husky. Это спасёт вас от случайного пуша сломанного кода.

Что в итоге

Jest — это мощный и простой инструмент. Он не требует сложной настройки, работает быстро и даёт уверенность в коде. Начните с малого: напишите тест для одной функции. Потом для другой. Через неделю вы заметите, что багов стало меньше, а спать вы стали крепче. Тестирование — это не роскошь, а необходимость. Особенно если вы работаете в команде или поддерживаете большой проект.

Не бойтесь ошибаться в тестах. Они тоже могут быть кривыми. Главное — начать. А Jest вам в этом поможет.

Студия WNDER