Что такое Mock?

Что такое Mock в контексте фронтенд-разработки

Mock (или Мок-объект) — это тестовый заменитель реальной зависимости, который симулирует её поведение в контролируемых условиях. В контексте фронтенд-разработки моки используются преимущественно для изоляции тестируемого кода от внешних систем, таких как серверные API, браузерные API, сторонние библиотеки или сложные модули приложения.

Ключевые цели использования мок-объектов

• Изоляция модулей: Позволяют тестировать отдельный компонент, функцию или модуль, не полагаясь на работоспособность и корректность других частей системы (например, бэкенда).
• Контроль над тестовым сценарием: Мок можно запрограммировать на возвращение определённых данных (успешный ответ, ошибка, специфичные данные) или на отслеживание вызовов (сколько раз вызвали, с какими аргументами).
• Ускорение тестов: Замена реальных сетевых запросов или тяжёлых операций мгновенными возвратами данных делает тесты быстрыми.
• Тестирование edge-кейсов и ошибок: Легко смоделировать редкие или ошибочные состояния, которые сложно воспроизвести в реальной системе (например, 500-я ошибка сервера или отключение сети).
• Устранение недетерминизма: Исключение сторонних факторов, которые могут сделать тесты нестабильными (флуктуации сети, изменяющиеся данные в БД).

Типичные сценарии применения на фронтенде

1. Мокирование HTTP-запросов (API-вызовов)

Самый распространённый случай. Вместо реальных запросов к бэкенду мок перехватывает их и возвращает фикстуры (заранее подготовленные данные).

// Пример с использованием Jest и его мок-функций
import { fetchUserData } from './api';

// Мокируем модуль 'axios' или глобальный 'fetch'
jest.mock('axios');

test('should display user data', async () => {
  // Настраиваем мок на возврат конкретного ответа
  axios.get.mockResolvedValue({
    data: { id: 1, name: 'Иван Иванов' }
  });

  const user = await fetchUserData(1);
  expect(user.name).toBe('Иван Иванов');
  // Проверяем, что запрос был вызван с правильным URL
  expect(axios.get).toHaveBeenCalledWith('/api/users/1');
});

2. Мокирование модулей и зависимостей

Полезно, когда нужно изолировать тест от сложной логики стороннего модуля.

// Мокируем модуль для работы с локальным хранилищем
import { saveSettings } from './settingsService';

jest.mock('./localStorage');

test('should call localStorage with correct data', () => {
  saveSettings({ theme: 'dark' });
  expect(localStorage.setItem).toHaveBeenCalledWith('settings', '{"theme":"dark"}');
});

3. Мокирование браузерных API

Многие компоненты взаимодействуют с window, document, localStorage, Geolocation API и т.д.

// Мокирование объекта window.location
const mockedLocation = { href: '' };
Object.defineProperty(window, 'location', {
  value: mockedLocation,
  writable: true,
});

test('should redirect to login page', () => {
  redirectToLogin();
  expect(window.location.href).toBe('/login');
});

Разница между Mock, Stub и Spy

• Stub (Заглушка): Упрощённая версия мока. Предоставляет заранее прописанные ответы на вызовы, но не отслеживает, как их использовали. Цель — заменить поведение.
• Spy (Шпион): Обёртка над реальной функцией, которая позволяет ей выполняться, но при этом отслеживает информацию о её вызовах (аргументы, количество, результаты). Цель — наблюдение.
• Mock (Мок): Чаще всего это комбинация Stub и Spy. Он и заменяет реальную зависимость предсказуемым поведением, и позволяет проверить, как тестируемый код с ним взаимодействовал.

// Spy пример с Jest
const video = {
  play() { return true; }
};
const spy = jest.spyOn(video, 'play'); // Шпионим за реальным методом

video.play();
expect(spy).toHaveBeenCalled(); // Проверяем факт вызова
spy.mockRestore(); // Восстанавливаем оригинал

Лучшие практики и инструменты

• Jest: Имеет мощную встроенную систему для мокинга модулей (jest.mock()), функций (jest.fn()) и отслеживания вызовов.
• Testing Library: В сочетании с Jest encourages мокировать не реализацию, а внешние контракты (HTTP, браузерное API), фокусируясь на тестировании поведения пользовательского интерфейса.
• MSW (Mock Service Worker): Современный инструмент для перехвата сетевых запросов на уровне браузера. Создаёт реалистичную имитацию бэкенда, которая работает как в тестах (Node.js), так и в браузере во время разработки.
• Важно: Не злоупотребляйте моками. Чрезмерное мокирование может привести к хрупким тестам, которые проверяют не реальное поведение, а ваши предположения о реализации. Мокируйте то, что находится за пределами ответственности тестируемого модуля (внешние API, базы данных, сторонние сервисы).

Итог: Mock — это фундаментальный инструмент в арсенале фронтенд-разработчика для написания быстрых, стабильных и изолированных модульных и интеграционных тестов. Правильное применение моков позволяет сосредоточиться на тестировании бизнес-логики конкретного компонента, не дожидаясь готовности всей системы и не страдая от её нестабильности.