Генерация coverage отчётов

Тестирование — неотъемлемая часть разработки программного обеспечения. Важно не только создавать тесты, но и отслеживать их покрытие. Инструменты для генерации отчётов о покрытии (coverage) позволяют увидеть, сколько строк кода покрыто тестами, а какие участки остаются непроверенными. Это даёт важную информацию о качестве тестов и их полноте. В этом разделе рассмотрим, как можно сгенерировать отчёты о покрытии для приложений, написанных с использованием React Testing Library.

Что такое coverage отчёт?

Coverage отчёт предоставляет информацию о том, какие части кода были выполнены во время тестов, а какие — нет. Этот отчёт может охватывать различные аспекты:

  • Покрытие строк (line coverage): показывает, сколько строк кода было выполнено.
  • Покрытие функций (function coverage): показывает, сколько функций было вызвано.
  • Покрытие ветвей (branch coverage): показывает, сколько ветвей условных операторов было выполнено.

Знание уровня покрытия помогает разработчикам обнаружить участки кода, которые ещё не проверены тестами, и улучшить качество программного продукта.

Инструменты для генерации coverage

Для генерации отчётов о покрытии кода в приложениях React, написанных с использованием React Testing Library, обычно используются следующие инструменты:

  • Jest: популярный тестовый фреймворк для JavaScript, который имеет встроенную поддержку для генерации отчётов о покрытии.
  • Istanbul (nyc): инструмент для анализа покрытия кода, который может быть интегрирован с Jest и другими тестовыми фреймворками.
  • React Testing Library: библиотека для тестирования React компонентов, которая сама по себе не генерирует отчёты о покрытии, но её можно использовать совместно с Jest для этой цели.

Настройка Jest для генерации coverage отчётов

Jest предоставляет встроенную функциональность для генерации отчётов о покрытии. Чтобы настроить её, нужно сделать несколько шагов.

  1. Установка Jest:

    Если Jest ещё не установлен, его можно добавить с помощью NPM или Yarn:

    npm install --save-dev jest

  2. Настройка конфигурации Jest:

    В файле package.json добавляется секция для конфигурации Jest. Чтобы включить сбор coverage отчётов, нужно добавить параметр collectCoverage.

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

    {
  "scripts": {
    "test": "jest --coverage"
  },
  "jest": {
    "collectCoverage": true,
    "coverageDirectory": "coverage",
    "coverageReporters": ["text", "lcov"]
  }
}

    В этом примере:

    • collectCoverage: true указывает Jest собирать информацию о покрытии.
    • coverageDirectory: "coverage" определяет папку, куда будут сохранены отчёты.
    • coverageReporters: ["text", "lcov"] указывает формат отчётов: текстовый вывод в консоль и отчёт в формате lcov, который может быть использован для визуализации покрытия в других инструментах.

  3. Запуск тестов с покрытием:

    Для того чтобы сгенерировать отчёт, достаточно запустить тесты с помощью команды:

    npm test

    Jest автоматически выполнит тесты и выведет информацию о покрытии, например, в формате:

    PASS  src/components/Example.test.js
√ should render the component correctly (20 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.621 s, estimated 2 s
Coverage:    75.0% (3/4)

    Также в папке coverage будет создан отчёт в формате HTML, который можно открыть в браузере для более детального анализа.

Анализ отчётов о покрытии

После того как отчёт сгенерирован, можно перейти к его анализу. Jest предоставляет информацию о проценте покрытия для каждой части кода.

  1. Общий процент покрытия:

    В отчёте показывается, сколько процентов строк кода было покрыто тестами. Например:

    Coverage:    75.0% (3/4)

    Это означает, что из 4 строк кода, только 3 были выполнены в тестах.

  2. Покрытие по файлам и строкам:

    В отчёте можно увидеть, какие файлы и строки кода были выполнены, а какие — нет. В HTML-отчёте каждая строка кода будет помечена цветом: зелёным для покрытых тестами строк и красным для непокрытых.

  3. Исключения и фильтрация:

    В случае, если определённые файлы или директории не должны быть включены в отчёт о покрытии, можно настроить Jest для исключения этих файлов. Для этого в конфигурации можно использовать параметр coveragePathIgnorePatterns.

    Пример:

    "jest": {
  "coveragePathIgnorePatterns": [
    "/node_modules/",
    "/tests/"
  ]
}

    В этом примере Jest исключит все файлы в директориях node_modules и tests из отчётов о покрытии.

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

Для автоматической генерации и проверки отчётов о покрытии в процессе CI/CD (непрерывной интеграции и доставки) важно интегрировать Jest с системой CI. Обычно это делается с помощью соответствующих настроек в файле конфигурации CI (например, в GitHub Actions, GitLab CI или CircleCI).

Пример для GitHub Actions:

name: Run Tests

on:
  push:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm install
      - run: npm test -- --coverage
      - name: Upload coverage report
        uses: codecov/codecov-action@v2

В этом примере после выполнения тестов отчёт о покрытии будет загружен в Codecov — платформу для анализа покрытия.

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

Для более удобного анализа отчётов о покрытии можно использовать сторонние инструменты, такие как Codecov или Coveralls. Эти платформы позволяют интегрировать отчёты с GitHub или другими системами управления репозиториями и визуализировать покрытия в удобном виде, предоставляя графики и детализированную информацию о пропущенных тестах.

Заключение

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

Оглавление