Coverage отчеты

Coverage отчеты — это инструмент анализа, который позволяет оценивать полноту тестирования компонентов и модулей проекта, написанных с использованием MDX. В контексте JavaScript и MDX coverage отчеты помогают определить, какие части кода были затронуты тестами, а какие остаются непроверенными, что критично для поддержания качества документации и тестируемого функционала.

Основные понятия Coverage

Coverage (покрытие кода) отражает степень, с которой тесты проверяют исходный код. В MDX файлах это включает:

  • JSX-компоненты, встроенные в Markdown.
  • Импортированные модули, используемые для динамического контента.
  • Скриптовые блоки, выполняющие логические операции или вычисления.

Типы покрытия кода:

  1. Statement coverage — проверка, выполнены ли все инструкции.
  2. Branch coverage — анализ всех возможных ветвлений (if, switch, тернарные выражения).
  3. Function coverage — отслеживание вызовов всех функций.
  4. Line coverage — определение, какие строки были выполнены.

MDX отличается тем, что традиционное покрытие кода в тестах JavaScript необходимо интегрировать с JSX-разметкой и Markdown-блоками. Для этого используются инструменты, такие как Jest с плагинами для работы с MDX (@testing-library/react, babel-plugin-transform-mdx).

Настройка Coverage для MDX

Чтобы получить coverage отчеты для MDX файлов, необходимо настроить сбор данных:

  1. Подключение Jest и Babel:
module.exports = {
  transform: {
    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
    '^.+\\.[jt]sx?$': 'babel-jest'
  },
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx,mdx}',
    '!src/**/*.stories.{js,jsx,ts,tsx,mdx}'
  ]
};
  1. Подключение coverage инструментария:
  • collectCoverage включает сбор данных о покрытии.
  • collectCoverageFrom определяет файлы для анализа. Обычно исключают stories и тестовые файлы, оставляя только исходный код.
  1. Обработка MDX файлов:

MDX файлы должны быть транспилированы в JSX/JS перед сбором coverage. Для этого используется:

  • babel-plugin-transform-mdx — преобразует MDX в React-компоненты.
  • jest-transform-mdx — позволяет Jest понимать MDX как тестируемые модули.

Практика работы с coverage

Пример измерения покрытия для компонента MDX:

import { Button } from './Button';

# Заголовок

<Button onCl ick={() => console.log('clicked')}>Нажми меня</Button>

Для такого файла coverage отчет покажет:

  • Покрытие импорта (Button) — функция и рендеринг компонента.
  • Покрытие JSX — использование элемента <Button> в разметке.
  • Покрытие функций — вызов обработчика onClick.

Если добавить тест:

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

test('Button click triggers console.log', () => {
  const { getByText } = render(<MyComponent />);
  fireEvent.click(getByText('Нажми меня'));
});

Отчет coverage теперь покажет:

  • 100% statement coverage для JSX разметки.
  • 100% function coverage для onClick.
  • Покрытие строки с текстом и компонентом <Button>.

Визуализация coverage

Результаты собираются в нескольких форматах:

  • lcov — для генерации HTML отчетов с детальной информацией по строкам.
  • text-summary — компактный вывод в консоль.
  • json — для интеграции с CI/CD и внешними аналитическими инструментами.

Пример конфигурации для Jest:

coverageReporters: ['html', 'text-summary', 'json']

После запуска jest --coverage будет создан каталог coverage, содержащий:

  • index.html — визуальный отчет с подсветкой строк.
  • lcov-report/ — полный HTML с детализацией по файлам MDX.
  • coverage-summary.json — суммарные показатели для скриптов CI.

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

Coverage отчеты для MDX файлов полезны в автоматизированных пайплайнах:

  • GitHub Actions / GitLab CI — сбор coverage после каждой сборки.
  • Fail build on low coverage — установка минимального порога покрытия (coverageThreshold):
coverageThreshold: {
  global: {
    branches: 80,
    functions: 85,
    lines: 90,
    statements: 90
  }
}
  • Отправка отчетов на сторонние сервисы — Codecov, Coveralls.

Лучшие практики

  1. Исключение stories и документации из coverage, чтобы не завышать показатели.
  2. Тестирование интерактивных блоков — MDX может содержать кнопки, формы и динамический контент.
  3. Комбинация unit и snapshot тестов — помогает покрыть визуальные и функциональные аспекты компонентов.
  4. Регулярное обновление конфигурации — MDX и библиотека React активно развиваются, что может влиять на сбор coverage.

Coverage отчеты в MDX позволяют глубоко контролировать качество тестирования документации и интерактивных компонентов, интегрируя Markdown, JSX и JavaScript в единый процесс анализа покрытия кода. Это критически важно для поддержания стабильности больших проектов с динамическим контентом и компонентной архитектурой.

Оглавление