Покрытие кода — важная метрика для измерения качества ваших тестов программного обеспечения. Он предоставляет способ количественной оценки того, какая часть вашего кода тестируется, и помогает вам определить области вашего кода, которые могут быть недостаточно охвачены вашими тестами.

Когда вы используете Jest с GitHub Actions, вы можете автоматизировать процесс запуска тестов и получения отчетов о покрытии, упрощая отслеживание покрытия кода с течением времени. Это может помочь вам убедиться, что ваш код хорошо протестирован, снизить риск внесения ошибок в ваш код и упростить поддержку вашего кода в будущем.

Кроме того, наличие отчетов о покрытии кода в вашем репозитории GitHub может помочь вам сообщать о качестве ваших тестов другим заинтересованным сторонам, таким как члены команды или клиенты. Это может повысить доверие к вашему коду и поможет укрепить уверенность в процессе разработки.

Теперь мы будем использовать следующий инструмент: Действие отчета о освещении Jest

Это инструмент, который поможет вам отслеживать охват вашего проекта. Формирует отчетный комментарий по каждому PR. Кроме того, выделяет файлы с уменьшенным охватом и новые файлы

Как мы можем настроить наш проект?

  1. Создайте новый скрипт для запуска всех модульных тестов и создания отчета о покрытии.

ПРИМЕЧАНИЕ. Этот скрипт создает новый файл с расширением JSON, поэтому для правильной работы нашего действия GitHub этот файл уже должен быть добавлен в проект при выполнении нашего PR. Так как если не выдается ошибка что файл не найден.

//package.json
{
  "name": "my project",
  "version": "1.0.0",
  "scripts": {
    "coverage": "jest --json --coverage --outputFile=report.json"
  }
 //...
}

2. Отредактируйте отчеты о покрытии из файла `jest.config.js` или файла сценария jest.

//jest.config.js
module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ["**/*.{js,vue}", "!**/node_modules/**"],
  coverageReporters: [ "text", "text-summary"]
}

3. Создайте новый файл рабочего процесса в своем проекте. Файлы рабочего процесса хранятся в каталоге .github/workflows вашего репозитория и определяют шаги, которые будет выполнять исполнитель GitHub Actions. Чтобы создать новый файл рабочего процесса, вы можете создать новый файл .yml в каталоге .github/workflows.

4. Добавьте новый шаг в файл рабочего процесса GitHub Actions.
(e.g, coverage.yml)

5. Теперь нам нужно настроить, в какой среде наших веток мы хотим запускать наше действие GitHub.

#coverage.yml
name: 'coverage'
on:
  pull_request:
    branches:
      - main
      - develop

6. Включите разрешения на запуск нашего действия GitHub.

#coverage.yml
jobs:
  coverage:
    permissions:
      checks: write
      pull-requests: write
      contents: write

7. Пришло время настроить окончательные этапы отчета.

 runs-on: ubuntu-latest
 steps:
   - uses: actions/checkout@v3
   - uses: actions/setup-node@v3
     with:
       cache: 'yarn'
   - uses: ArtiomTr/[email protected]
     id: coverage
     with:
       annotations: none
       package-manager: yarn
       test-script: yarn coverage
       icons: emoji

В конце концов, у вас будет полная конфигурация, подобная следующей:

#coverage.yml
name: 'coverage'
on:
  pull_request:
    branches:
      - main
      - develop
jobs:
  coverage:
    permissions:
      checks: write
      pull-requests: write
      contents: write
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          cache: 'yarn'
      - uses: ArtiomTr/[email protected]
        id: coverage
        with:
          annotations: none
          package-manager: yarn
          test-script: yarn coverage
          icons: emoji

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

Также упомяните, что отчет выполняется снова, если в PR делается новая фиксация.

Таким образом, охват модульных тестов Jest с помощью GitHub Actions важен, потому что он помогает вам:

  1. Убедитесь, что ваш код хорошо протестирован.
  2. Уменьшите риск внесения ошибок в ваш код.
  3. Легко отслеживать качество ваших тестов с течением времени.
  4. Сообщите о качестве своих тестов другим.
  5. Повысьте уверенность в своем процессе разработки.

Спасибо за чтение! читаем скоро. 🙌🏽🙌🏽