Snapshot тестирование

Snapshot тестирование — это метод контроля изменений интерфейсов или компонентов приложения путем сохранения их «снимков» (snapshots) в момент тестирования и последующего сравнения с эталонными версиями. В контексте MDX и JavaScript это особенно полезно для тестирования визуального представления документации и компонентов React, описанных через MDX.

Настройка среды для Snapshot тестирования

Для работы с Snapshot тестами в экосистеме MDX чаще всего используется комбинация Jest и @testing-library/react. Основные шаги:

  1. Установка зависимостей:
npm install --save-dev jest @testing-library/react @testing-library/jest-dom babel-jest
  1. Конфигурация Jest: В файле jest.config.js необходимо указать поддержку JSX и MDX:
module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.mdx$': '@mdx-js/jest'
  },
  moduleFileExtensions: ['js', 'jsx', 'mdx'],
};
  1. Настройка Babel для корректной обработки JSX:
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

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

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

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

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

test('MDX компонент рендерится корректно', () => {
  const { container } = render(<MyComponent />);
  expect(container).toMatchSnapshot();
});
  • render из @testing-library/react создаёт виртуальный DOM компонентa.
  • container содержит HTML, который можно сохранять и проверять.
  • toMatchSnapshot() автоматически создаёт файл с эталонным состоянием компонента.

Организация файлов Snapshot

  • Snapshots хранятся рядом с тестами в папке __snapshots__.
  • Файлы имеют расширение .snap.
  • Рекомендуется коммитить snapshots в систему контроля версий, чтобы отслеживать изменения.

Обновление Snapshot

При изменении интерфейса компонента тест может «упасть». Для обновления эталонного снимка используется:

jest -u

Важно понимать, что обновление snapshots не заменяет проверку изменений — оно фиксирует текущую версию.

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

MDX часто содержит интерактивные элементы, такие как кнопки или формы. Для таких компонентов snapshot тестирование следует сочетать с user-event:

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import InteractiveComponent from './InteractiveComponent.mdx';

test('Интерактивный MDX компонент', async () => {
  const { container, getByText } = render(<InteractiveComponent />);
  const button = getByText('Нажми меня');
  await userEvent.click(button);
  expect(container).toMatchSnapshot();
});

Таким образом фиксируется не только статическая разметка, но и динамическое состояние компонента.

Советы по эффективному использованию Snapshot тестов в MDX

  • Минимизировать размер snapshot: сохранять только HTML, не включая лишние стили или атрибуты динамического контента.
  • Разделять крупные MDX документы на мелкие компоненты для удобства тестирования.
  • Комбинировать с unit-тестами для логики компонентов: snapshot фиксирует визуальное состояние, unit-тест — поведение.
  • Использовать регулярные проверки при обновлении MDX контента, чтобы избежать непреднамеренных изменений интерфейса.

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

Оглавление