Покройте свой NPM-пакет Jest и Codecov ☂️

Введение

Давайте поговорим о покрытии кода и о том, как вы можете создавать отчеты о покрытии в Jest и Codecov.

Что такое покрытие кода?

Если вы знакомы с testing. Вы знаете его основное предназначение:

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

Однако, если модульные тесты не охватывают все сценарии, все же есть шанс, что ваши изменения могут что-то сломать. Вот почему у нас есть покрытие кода: мера того, какая часть кода покрывается автоматическими тестами.

Без анализа покрытия кода ваши тесты потеряли свою основную цель.

Это важно, когда ваш проект растет и в него вовлечено много разработчиков.

✅ Мы можем поддерживать качество нашего теста при добавлении нового кода.

✅ Мы получаем более глубокое понимание существующих тестов.

✅ Дайте разработчикам уверенность в необходимости рефакторинга кода, не беспокоясь о поломке.

✅ Мы можем поймать непроверенные потоки до того, как они вызовут проблемы.

Хорошо, теперь, когда мы знаем, что такое покрытие кода, давайте его реализуем! ?

Предпосылки

Чтобы эта статья была краткой и лаконичной, я начну здесь: «Пошаговое построение и публикация» и пакет NPM Typescript.

Что сделано на данный момент:

✅ Настроить базовый NPM-пакет

✅ Добавить тестирование с Jest

✅ Напишите базовый тест

Если ваш проект уже настроен с помощью Jest, все готово. ? Если нет, я рекомендую вам клонировать или разветвить репозиторий для этой статьи, чтобы начать с базовой основы пакета NPM:

git clone [email protected]:caki0915/my-awesome-greeter.git && cd my-awesome-greeter &&git checkout basic-package && npm install

Если вам интересно, как создавать пакеты NPM, я рекомендую мою предыдущую статью здесь.

Хорошо, теперь, когда все настроено, поехали!

Создание отчетов о покрытии в Jest

Создавать отчеты о покрытии в Jest очень просто. Просто добавьте эту строку в свой файл конфигурации jest:

"collectCoverage":true

collectCoverage: должно быть установлено значение true, если вы хотите, чтобы jest собирал информацию о покрытии во время выполнения ваших тестов. (Тесты будут выполняться немного медленнее, поэтому по умолчанию это false.)

Убедитесь, что ваша команда сценария testв файле package.json будет запускать Jest с вашим файлом конфигурации.

“test”: “jest --config jestconfig.json”

Хорошо! Бегатьnpm testв вашем терминале, и вуаля! У вас будет новая папка с файлами покрытия кода, созданными для вас.

Не забудьте добавить папку покрытия в .gitignore. Нам не нужны файлы сборки в нашем репозитории. ?

Сделайте что-нибудь полезное из ваших отчетов

Хорошо, это здорово, мы создали папку с некоторыми файлами, но что нам делать с этой информацией? ?

Прежде всего, вы можете вручную просмотреть отчет о покрытии на сгенерированной HTML-странице. Откройте /coverage/lcov-report/index.htmlв своем браузере:

Хорошо, это хорошо, но действительно ли нам нужно вручную просматривать отчеты по каждой сборке ??

Нет, не надо. Вы должны публиковать отчеты в Интернете, чтобы сделать из них что-нибудь полезное. В этой статье мы собираемся использовать инструмент отчетности о покрытии под названием codecov.io.

Codecov бесплатен для проектов с открытым исходным кодом. Он выводит отчеты о покрытии кода на новый уровень. С помощью Codecov мы также можем автоматически создавать значки и запускать их в сборках с непрерывной интеграцией. (Подробнее об этом позже.)

Зарегистрируйтесь на //codecov.io/ и следуйте инструкциям по подключению к Github и вашему репозиторию. После этого вы должны увидеть такой экран:

Ницца! На данный момент эта страница будет пустой, поскольку вы еще не загрузили отчеты, так что давайте это исправим. В терминале запустите:

npm install --save-dev codecov

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

(Замените токеном репозитория, найденным в кодеке ov.io)

./node_modules/.bin/codecov --token=""

Успех! Теперь вы можете просматривать свой отчет онлайн на codecov.io.? ?

//codecov.io/gh///

Добавьте значок на свой README.md

Значки важны, особенно для пакетов NPM. Когда вы видите красивый значок покрытия кода в npmjs и Github, создается первое впечатление высокого качества.

В вашем README.md добавьте следующую строку:

(Replace , and with your information)

[![Codecov Coverage](//img.shields.io/codecov/c/github///.svg?style=flat-square)](//codecov.io/gh///)

In my case, it will look like this:

[![Codecov Coverage](//img.shields.io/codecov/c/github/caki0915/my-awesome-greeter/coverage.svg?style=flat-square)](//codecov.io/gh/caki0915/my-awesome-greeter/)

Awesome! Now you can show the rest of the world that you are using unit-testing and code coverage reports! ? ?

Summary

If you’re using tests, code coverage reporting is a must and it should run every-time you make a pull-request or make changes on your branches.

You can find my NPM-starter package here on Github.

It’s an educational base for best practices NPM-package development. Comments, Forks and PR’s are welcome. ?

What’s next?

If you don’t use continuous integration (CI) yet, it’s time to set it up.

In my next article, I’m going to cover continuous integration with code-coverage for NPM packages.

If you find this article useful, please give it some claps and follow me for more articles about development.

Good luck building your awesome package! ? ?