Получение отчёта о покрытии кода в Jest: решение

Быстрый ответ

Для генерации отчёта о покрытии кода с применением Jest используйте ключ --coverage:

jest --coverage

Jest собирает данные о покрытии и размещает отчёт в директории coverage/. Вы можете просмотреть детальный отчёт по адресу coverage/lcov-report/index.html в своём браузере.

Если вы хотите использовать последние функции покрытия, обновите Jest до самой последней версии, если у вас установлена версия ниже 21.2.1. Настройка скриптов в package.json при использовании npm или yarn может выглядеть следующим образом:

"scripts": {
    "test": "jest",
    "test:coverage": "jest --coverage"
}

Отчёт о покрытии кода можно запустить с помощью команд npm test -- --coverage или yarn test --coverage. Для детализированного настройки покрытия ознакомьтесь с опциями collectCoverage и coverageReporters в конфигурации Jest.

Расширение отчетов о покрытии кода

Обновление Jest до актуальной версии

Проверьте имеющуюся версию Jest и обновите её до самой последней, чтобы получить доступ к новейшим функциям покрытия кода.

Подробнее об этом расскажет наш спикер на видео

Конфигурация Jest

Измените jest.config.js, добавив в него следующие параметры:

module.exports = {
  collectCoverage: true,
  coverageReporters: ['json', 'lcov', 'text', 'clover']
};

Запуск с помощью npx для локальной проверки

Для запуска локальных тестов без глобальной установки Jest пользуйтесь npx:

npx jest --coverage

Форматы отчётов

Jest поддерживает разные форматы отчётов о покрытии кода:

• json: подходит для автоматической обработки данных.
• html: представляет собой визуально презентабельный отчёт в формате HTML.
• text: отдаёт краткую сводку данных прямо в терминале.

Определение слабых мест кода

Используйте данные о покрытии для обнаружения недостаточно протестированных участков кода и улучшения качества собственных тестов.

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

Запустив Jest с параметром --coverage, вы получаете возможность визуализации вашего покрытия тестами, где:

jest --coverage

Упрощённый пример: протестированные участки кода (✅) и непротестированные (⚪).

🎨 Визуализация покрытия:
| Тип покрытия       | Символ |
| ------------------- | ------ |
| Утверждения        | ✅⚪   |
| Ветвление          | ✅⚪   |
| Функции            | ✅⚪   |
| Строки             | ✅⚪   |

Цель — полностью покрытое тестами полотно 🌈, что свидетельствует о комплексном тестировании.

Глубокое изучение Jest

Вы можете собирать данные о покрытии определённых тестовых файлов с использованием npx jest --coverage. Для более глубокого анализа покрытии кода рассмотрите использование Istanbul.

Инструменты покрытия кода в CI

Интеграция с сервисами, такими как Codecov или Coveralls, поможет отслеживать покрытие кода в ваших командных проектах.

Задание минимального уровня покрытия

В jest.config.js можно установить минимально допустимое процентное покрытие по различным показателям:

module.exports = {
  // ...
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80
    }
  }
};

Это гарантирует, что проблемы с покрытием кода не останутся незамеченными.

Внимательное отношение к ложноположительным результатам

Тесты с высоким уровнем покрытия не всегда гарантируют качество. Важно удостовериться, что тесты проверяют ключевые аспекты, а не просто увеличивают статистику.

Полезные материалы

1. Jest CLI Options · Jest — официальная документация Jest.
2. Configuration Jest · Jest — подробное руководство по настройке сбора данных о покрытии.
3. Code coverage report explained | Atlassian — описание отчётов о покрытии кода.
4. Istanbul, a JavaScript test coverage tool — Istanbul, мощный анализатор покрытия для Jest.
5. Codecov – Leading Code Coverage solution — сервис Codecov для аналитики покрытия кода.
6. Configuration Jest · Jest — настройка отчётов о покрытии в Jest.
7. Medium — статья на Medium о маппинге покрытия с Jest.