Отримайте свій NPM-пакет, покритий Jest та Codecov ☂️

Вступ

Давайте поговоримо про охоплення коду та про те, як можна робити звіти про покриття в Jest та Codecov.

Що таке покриття коду?

Якщо ви знайомі з тестуванням. Ви знаєте його головне призначення:

Тести дають розробникам свободу вносити зміни та переробляти код із впевненістю, що все повинно працювати нормально, доки пройдуть усі автоматизовані тести.

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

Без аналізу покриття коду ваші тести втратили основне призначення.

Це важливо, коли ваш проект росте і залучено багатьох розробників.

✅ Ми можемо підтримувати якість нашого тесту, коли додаємо новий код.

✅ Ми отримуємо глибше розуміння існуючих тестів.

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

✅ Ми можемо вловлювати неперевірені потоки, перш ніж вони спричинять проблеми.

Гаразд, тепер, коли ми знаємо, що таке покриття коду, давайте його реалізуємо! ?

Передумови

Щоб ця стаття була короткою і короткою, я почну тут: Крок за кроком Створення та публікація та Пакет машинопису NPM.

Що зроблено дотепер:

✅ Налаштуйте базовий пакет 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, якщо ви хочете, щоб жарт збирав інформацію про охоплення під час запуску тестів. (Тести будуть виконуватися трохи повільніше, тому за замовчуванням помилкові.)

Переконайтеся, що ваша команда сценарію 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! ? ?