Зарегистрируйтесь, чтобы продолжить обучение

Моки JS: Продвинутое тестирование

В тестировании очень популярен мокинг. Технически он похож на стабинг, и из-за этого их часто путают (специально или ненамеренно). Но все же они служат разным целям и используются в разных ситуациях. Разберемся, что это такое, и когда он нужен.

До этого момента мы рассматривали побочные эффекты как помеху тестирования нашей логики. Для их изоляции использовались стабы или прямое выключение логики в тестовой среде. После этого можно было спокойно проверять правильность работы функции.

В некоторых ситуациях требуется кое-что другое. Не результат работы функции, а то, что она выполняет нужное нам действие, например, шлет правильный HTTP-запрос с правильными параметрами. Для этого понадобятся моки. Моки проверяют, как выполняется код.

HTTP

import nock from 'nock';
import { getPrivateForkNames } from '../src.js';

// Предотвращение случайных запросов
nock.disableNetConnect();

test('getPrivateForkNames', async () => {
  // Полное название домена
  const scope = nock('https://api.github.com')
    // Полный путь
    .get('/orgs/hexlet/repos/?private=true')
    .reply(200, [{ fork: true, name: 'one' }, { fork: false, name: 'two' }]);

  await getPrivateForkNames('hexlet');
  // Метод `scope.isDone()` возвращает `true` только тогда,
  // когда соответствующий запрос был выполнен внутри `getPrivateForkNames`
  expect(scope.isDone()).toBe(true);
});

Это и называется мокинг. Мок проверяет, что какой-то код выполнился определенным образом. Это может быть вызов функции, HTTP-запрос и тому подобное. Задача мока убедиться в том, что это произошло, и в том, как конкретно это произошло, например, что в функцию были переданы конкретные данные.

Что дает нам такая проверка? В данном случае — мало что. Да, мы убеждаемся, что вызов был, но само по себе это еще ни о чем не говорит. Так когда же полезны моки?

Представьте, что мы бы разрабатывали библиотеку @octokit/rest, ту самую, что выполняет запросы к GitHub API. Вся суть этой библиотеки в том, чтобы выполнить правильные запросы с правильными параметрами. Поэтому там нужно обязательно проверять выполнение запросов с указанием точных URL-адресов. Только в таком случае можно быть уверенными, что она выполняет верные запросы.

В этом ключевое отличие мока от стаба. Стаб устраняет побочный эффект, чтобы не мешать проверке результата работы кода, например, возврату данных из функции. Мок фокусируется на том, как конкретно работает код, что он делает внутри. При этом чисто технически мок и стаб создаются одинаково, за исключением того, что на мок вешают ожидания, проверяющие вызовы. Это приводит к путанице, потому что часто моками называют стабы. С этим ничего уже не поделать, но для себя всегда пытайтесь понять, о чем идет речь. Это важно, от этого зависит фокус тестов.

Функции

Моки довольно часто используют с функциями (методами). К примеру, они могут проверять:

  • Что функция была вызвана
  • Сколько раз она была вызвана
  • Какие аргументы мы использовали
  • Сколько аргументов было передано в функцию
  • Что вернула функция

Предположим, что мы хотим протестировать функцию forEach. Она вызывает колбек для каждого элемента коллекции:

[1, 2, 3].forEach((v) => console.log(v)); // или проще [1, 2, 3].forEach(console.log)

Эта функция ничего не возвращает, поэтому напрямую ее не протестировать. Можно попробовать сделать это с помощью моков. Проверим, что она вызывает переданный колбек и передает туда нужные значения.

Так как мы изучаем Jest, то для создания моков воспользуемся встроенным механизмом Jest. В других фреймворках могут быть свои встроенные механизмы. Кроме того, как мы убедились выше, существуют специализированные библиотеки для моков и стабов.

test('forEach', () => {
  // Моки функций в Jest создаются с помощью функции jest.fn
  // Она возвращает функцию, которая запоминает все свои вызовы и переданные аргументы
  // Потом это используется для проверок
  const callback = jest.fn();

  [1, 2, 3].forEach(callback);

  // Теперь проверяем, что она была вызвана с правильными аргументами нужное количество раз
  expect(callback.mock.calls).toHaveLength(3);
  // Первый аргумент первого вызова
  expect(callback.mock.calls[0][0]).toBe(1);
  // Первый аргумент второго вызова
  expect(callback.mock.calls[1][0]).toBe(2);
  // Первый аргумент третьего вызова
  expect(callback.mock.calls[2][0]).toBe(3);
});

С помощью моков мы проверили, что функция была вызвана ровно три раза, и ей, последовательно для каждого вызова, передавался новый элемент коллекции. В принципе, можно сказать, что этот тест действительно проверяет работоспособность функции forEach(). Но можно ли сделать это проще, без мока и без завязки на внутреннее поведение? Оказывается, можно. Для этого достаточно использовать замыкание:

test('forEach', () => {
  const result = [];
  const numbers = [1, 2, 3];
  numbers.forEach((x) => result.push(x));
  expect(result).toEqual(numbers);
});

Объекты

Jest позволяет создавать моки и для объектов. Они создаются с помощью функции jest.spyOn(), напоминающей уже известную нам jest.fn(). Эта функция принимает на вход объект и имя метода в этом объекте, и отслеживает вызовы этого метода. Отследим, в качестве примера, вызов console.log():

test('logging something', () => {
  const spy = jest.spyOn(console, 'log');

  console.log(12);

  expect(spy).toHaveBeenCalled(); // => true, т.к. метод log был вызван
  expect(spy).toHaveBeenCalledTimes(1); // => true, т.к. метод был вызван 1 раз
  expect(spy).toHaveBeenCalledWith(12); // true, т.к. log был вызван с аргументом 12
  expect(spy.mock.calls[0][0]).toBe(12); // проверка, идентичная предыдущей
});

Кроме того, Jest позволяет создавать свою реализацию сбора данных о вызовах отслеживаемой функции при помощи метода mockImplementation(fn). Колбэком этого метода будет функция, которая выполняется после каждого вызова отслеживаемой функции. Возьмем предыдущий пример, но теперь соберем аргументы каждого вызова console.log() в отдельный массив:

test('logging something', () => {
  const logCalls = [];
  // Здесь функция внутри mockImplementation принимает на вход аргумент(ы),
  // с которым был вызван console.log, и сохраняет его в заранее созданный массив
  const spy = jest.spyOn(console, 'log').mockImplementation((...args) => logCalls.push(args));

  console.log('one');
  console.log('two');

  expect(logCalls.join(' ')).toBe('one two');
});

Преимущества и недостатки

Несмотря на то, что существуют ситуации, в которых моки нужны, в большинстве ситуаций их нужно избегать. Моки слишком много знают о том, как работает код. Любой тест с моками из черного ящика превращается в белый ящик. Повсеместное использование моков приводит к двум вещам:

  • После рефакторинга приходится переписывать тесты (много тестов!), даже если код работает правильно. Происходит это из-за завязки на то, как конкретно работает код
  • Код может перестать работать, но тесты проходят, потому что они сфокусированы не на результатах его работы, а на том, как он устроен внутри

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


Дополнительные материалы

  1. Jest: Mocking functions
  2. Mock aren't stubs
  3. Nock: HTTP server mocking and expectations library for Node.js
  4. Mock Service Worker
  5. jest.fn() vs jest.spyOn()

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React
10 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript в браузере и на сервере (Node.js), разработка бекендов на Fastify и фронтенда на React
16 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript, разработка веб-приложений, bff и сервисов используя Fastify, проектирование REST API
10 месяцев
с нуля
Старт 26 декабря
профессия
новый
Git, JavaScript, Playwright, бэкенд-тесты, юнит-тесты, API-тесты, UI-тесты, Github Actions, HTTP/HTTPS, API, Docker, SQL
8 месяцев
c опытом
Старт 26 декабря

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»