Интеграционные тесты

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

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

Для тестирования MDX-файлов чаще всего используют комбинацию следующих инструментов:

  • Jest — для запуска тестов и проверки логики компонентов.
  • Testing Library (React Testing Library или Vue Testing Library) — для рендеринга компонентов в виртуальном DOM и проверки взаимодействий.
  • @mdx-js/react — для интеграции MDX с React-компонентами.

Пример конфигурации Jest

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.mdx$': '@mdx-js/jest',
  },
  moduleFileExtensions: ['js', 'jsx', 'json', 'mdx'],
};

Здесь используется специальный трансформер @mdx-js/jest для корректной обработки MDX-файлов в тестовой среде.

Рендеринг MDX-документа

Для интеграционных тестов важно уметь рендерить MDX-документ с помощью компонентов-обёрток:

import { render, screen } from '@testing-library/react';
import { MDXProvider } from '@mdx-js/react';
import MyMDXDocument from './example.mdx';
import CustomComponents from './CustomComponents';

test('рендерит MDX документ с пользовательскими компонентами', () => {
  render(
    <MDXProvider components={CustomComponents}>
      <MyMDXDocument />
    </MDXProvider>
  );
  expect(screen.getByText('Заголовок MDX')).toBeInTheDocument();
});

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

  • MDXProvider позволяет переопределять стандартные элементы Markdown (например, h1, p) на кастомные компоненты.
  • Проверка через screen.getByText позволяет убедиться, что контент действительно рендерится.

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

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

// example.mdx
export const Info = ({ name }) => <div>Привет, {name}!</div>;
import { render, screen } from '@testing-library/react';
import { MDXProvider } from '@mdx-js/react';
import { Info } from './example.mdx';

test('корректно отображает переданные пропсы', () => {
  render(
    <MDXProvider>
      <Info name="Мир" />
    </MDXProvider>
  );
  expect(screen.getByText('Привет, Мир!')).toBeInTheDocument();
});

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

Проверка взаимодействия компонентов

MDX позволяет интегрировать интерактивные компоненты. Интеграционные тесты должны проверять не только рендеринг, но и корректное поведение:

// InteractiveButton.mdx
import { useState } from 'react';

export const InteractiveButton = () => {
  const [count, setCount] = useState(0);
  return <button onCl ick={() => setCount(count + 1)}>Нажато {count} раз</button>;
};
import { render, screen, fireEvent } from '@testing-library/react';
import { InteractiveButton } from './InteractiveButton.mdx';

test('кнопка увеличивает счетчик при клике', () => {
  render(<InteractiveButton />);
  const button = screen.getByRole('button');
  fireEvent.click(button);
  expect(button).toHaveTextContent('Нажато 1 раз');
});

Ключевой момент: Использование fireEvent позволяет симулировать пользовательские действия, проверяя интеграцию реактивного состояния и MDX-рендеринга.

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

MDX-документы часто используют сторонние библиотеки UI, такие как Material-UI, Chakra UI, или Tailwind. Интеграционные тесты должны гарантировать, что стили и функциональность не нарушаются при рендеринге внутри MDX:

import { render, screen } from '@testing-library/react';
import { Button } from '@chakra-ui/react';
import MyMDXDocument from './docWithChakra.mdx';

test('рендерит MDX с Chakra UI компонентом', () => {
  render(<MyMDXDocument />);
  expect(screen.getByRole('button')).toBeInTheDocument();
});

Совет: Для корректного тестирования внешних UI-компонентов стоит подключать ThemeProvider или аналогичные контексты библиотек.

Стратегии тестирования MDX

  1. Unit + Integration Hybrid: Тестируются как отдельные компоненты, так и их использование внутри MDX.
  2. Snapshot-тесты: Позволяют отслеживать изменения рендеринга документа. Полезно для больших документаций.
  3. End-to-End тестирование: Используется Cypress или Playwright для проверки полной работы интерактивных MDX-документов в браузере.

Практические рекомендации

  • Разделение компонентов и контента: Компоненты лучше держать в отдельных модулях, а MDX использовать только для объединения и структурирования контента.
  • MDXProvider обязательно: Любые пользовательские компоненты должны регистрироваться через MDXProvider.
  • Изоляция состояний: Для интерактивных компонентов полезно использовать beforeEach или отдельные рендеры для каждого теста, чтобы состояния не пересекались.
  • Тестировать контент и интерактивность: Проверка только текста без кликов и событий не отражает полной функциональности MDX-документа.

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

Оглавление