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

MDX объединяет возможности Markdown и JSX, что позволяет встраивать React-компоненты прямо в Markdown-документы. При тестировании рендеринга MDX необходимо учитывать как стандартный Markdown-контент, так и динамические React-компоненты. Основная цель тестирования — убедиться, что структура документа и поведение компонентов соответствуют ожиданиям.

Настройка тестовой среды

Для корректного рендеринга MDX в тестах используется комбинация библиотек @testing-library/react и @mdx-js/react. Основные шаги настройки:

  1. Установка зависимостей:
npm install @testing-library/react @mdx-js/react @testing-library/jest-dom
  1. Создание провайдера MDX: MDX-документы используют MDXProvider, который обеспечивает возможность переопределения компонентов по типам Markdown.
import { MDXProvider } from '@mdx-js/react';
import { render } from '@testing-library/react';

const components = {
  h1: (props) => <h1 style={{ color: 'blue' }} {...props} />,
  p: (props) => <p style={{ fontSize: '16px' }} {...props} />,
};

const renderMDX = (MDXContent) => 
  render(
    <MDXProvider components={components}>
      <MDXContent />
    </MDXProvider>
  );

Проверка рендеринга базового контента

После настройки провайдера важно протестировать стандартные элементы Markdown:

import MyMDX from './example.mdx';
import '@testing-library/jest-dom';

test('рендерит заголовки и абзацы', () => {
  const { getByText } = renderMDX(MyMDX);
  expect(getByText('Пример заголовка')).toBeInTheDocument();
  expect(getByText('Пример параграфа')).toBeInTheDocument();
});
  • getByText позволяет находить элементы по тексту.
  • toBeInTheDocument проверяет присутствие элемента в DOM.

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

MDX позволяет использовать любые React-компоненты, что требует проверки их рендеринга и интерактивного поведения:

const Button = ({ onClick, children }) => (
  <button onCl ick={onClick}>{children}</button>
);

const components = { Button };

test('рендерит кнопку и обрабатывает клик', () => {
  const handleClick = jest.fn();
  const { getByText } = renderMDX(() => <Button onCl ick={handleClick}>Нажми меня</Button>);

  const button = getByText('Нажми меня');
  expect(button).toBeInTheDocument();

  button.click();
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Ключевые моменты:

  • Проверка наличия компонента в DOM.
  • Проверка реакций на события (click, change, submit).

Снапшот-тестирование MDX

Снапшоты позволяют фиксировать визуальное и структурное состояние MDX-документа и обнаруживать непреднамеренные изменения:

import { render } from '@testing-library/react';
import MyMDX from './example.mdx';

test('снапшот документа', () => {
  const { container } = renderMDX(MyMDX);
  expect(container).toMatchSnapshot();
});

Преимущества:

  • Автоматическое сравнение DOM.
  • Быстрое выявление изменений структуры документа.

Модульное тестирование отдельных блоков

Для больших MDX-документов целесообразно тестировать отдельные секции или компоненты. Это повышает скорость тестирования и упрощает поддержку:

import { Alert } from './components/Alert';

test('рендерит предупреждение с текстом', () => {
  const { getByText } = render(<Alert type="warning">Внимание!</Alert>);
  expect(getByText('Внимание!')).toBeInTheDocument();
});

Рекомендуется создавать отдельные MDX-компоненты для повторно используемых блоков и тестировать их изолированно.

Работа с контентом, зависящим от пропсов

MDX-документы могут принимать пропсы, влияющие на отображение. В тестах следует проверять все ключевые варианты:

import MyMDXWithProps from './exampleProps.mdx';

test('рендерит контент с пропсами', () => {
  const { getByText } = renderMDX(() => <MyMDXWithProps name="Иван" />);
  expect(getByText('Привет, Иван!')).toBeInTheDocument();
});

Интеграция с Jest и CI/CD

Для полноценного тестирования MDX:

  • Использовать Jest для запуска тестов и снапшотов.
  • Настроить jest.config.js с обработкой .mdx файлов через babel-jest и @mdx-js/loader.
  • Добавить проверку тестов в CI/CD, чтобы гарантировать корректность рендеринга при изменении контента или компонентов.

Советы по организации тестов MDX

  • Разделять тесты на структурные, функциональные и снапшот-тесты.
  • Использовать мок-компоненты для внешних зависимостей.
  • Проверять все интерактивные элементы (кнопки, формы, ссылки).
  • Писать тесты на разные состояния компонента (loading, error, empty).

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

Оглавление