Моки и стабы

MDX (Markdown + JSX) позволяет использовать компоненты React внутри markdown-файлов, что открывает широкие возможности для создания интерактивной документации и демонстрации компонентов. При работе с MDX часто возникает необходимость тестирования компонентов, особенно в образовательных или демонстрационных целях. Для этого применяются моки и стабы.

Понятие моков и стабов

  • Мок (mock) — объект или функция, имитирующая поведение реального компонента или модуля. Используется для проверки того, как компонент взаимодействует с зависимостями.
  • Стаб (stub) — более упрощённая форма мока, которая заменяет функциональность зависимого модуля минимальной реализацией, возвращая заранее заданные данные.

Основное различие заключается в степени интерактивности: мок отслеживает вызовы и позволяет проверять взаимодействие, стаб же просто предоставляет фиктивные значения без контроля за вызовами.

Использование моков для компонентов MDX

В MDX часто требуется демонстрировать компонент с внешними зависимостями, такими как API или глобальные состояния. Пример структуры мока:

// mockApi.js
export const fetchUser = jest.fn(() => Promise.resolve({ id: 1, name: 'Alice' }));
import { fetchUser } from './mockApi';
import { UserCard } from './UserCard';

Здесь компонент UserCard получает мок-функцию fetchUser вместо реального API. Это позволяет:

  • Предотвратить сетевые запросы при рендеринге MDX;
  • Локализовать поведение компонента для тестов или документации;
  • Демонстрировать различные сценарии (например, успешное получение данных, ошибки, пустой результат).

Создание стабов для демонстрации данных

Стабы чаще применяются, когда необходимо просто отобразить данные без сложной логики. Пример:

// userStub.js
export const userStub = { id: 2, name: 'Bob', role: 'admin' };
import { userStub } from './userStub';
import { UserCard } from './UserCard';

Преимущества использования стабов:

  • Быстрая подготовка MDX-страниц без подключения API;
  • Возможность демонстрации разных наборов данных через разные стабы;
  • Минимизация зависимости от внешних библиотек или сервисов.

Интеграция моков и стабов с Storybook

MDX активно применяется в Storybook, что делает моки и стабы особенно полезными для визуальных историй компонентов.

import { Meta, Story } from '@storybook/addon-docs/blocks';
import { UserCard } from './UserCard';
import { fetchUser } from './mockApi';
import { userStub } from './userStub';

Такой подход позволяет разделять демонстрации с контролем поведения и с фиктивными данными, обеспечивая гибкость и безопасность MDX-документации.

Лучшая практика организации моков и стабов

  1. Отдельные файлы для моков и стабов Создание отдельной папки __mocks__ или stubs упрощает повторное использование.

  2. Явное именование функций и объектов Например, fetchUserMock, userStubAdmin, чтобы избежать путаницы.

  3. Минимальная реализация стабов Не стоит перегружать стабы лишней логикой — их цель только предоставить данные для рендеринга.

  4. Использование jest.fn или sinon для моков Позволяет отслеживать вызовы функций, что полезно для тестов и Storybook.

  5. Комбинация с пропсами компонентов Передача мока или стаба через пропсы обеспечивает гибкость и совместимость с любыми MDX-компонентами.

Подходы к тестированию MDX с моками и стабами

MDX-документация часто содержит интерактивные примеры компонентов. Тестирование таких компонентов требует моков и стабов:

  • Мок для событий: проверка, что компонент вызывает определённые функции при клике.
  • Стаб для данных: демонстрация отображения компонента с заранее подготовленными объектами.
  • Комбинированный подход: один компонент может получать мок для сетевого запроса и стаб для локального состояния.

Пример теста:

import { render, screen } from '@testing-library/react';
import { UserCard } from './UserCard';
import { fetchUser } from './mockApi';

test('отображает имя пользователя из мока', async () => {
  render();
  const userName = await screen.findByText('Alice');
  expect(userName).toBeInTheDocument();
  expect(fetchUser).toHaveBeenCalledTimes(1);
});

Этот подход обеспечивает контролируемое окружение, где можно безопасно демонстрировать и тестировать MDX-компоненты.

Преимущества использования моков и стабов в MDX

  • Безопасность: отсутствуют реальные вызовы API при рендеринге.
  • Повторяемость: демонстрации воспроизводимы с одинаковыми результатами.
  • Гибкость: легко демонстрировать разные сценарии.
  • Тестируемость: позволяет интегрировать MDX-примеры в автоматические тесты.
Оглавление