Вземете вашия NPM-пакет, покрит с Jest и Codecov ☂️

Въведение

Нека да поговорим за покритие на кода и как можете да правите отчети за покритие в Jest и Codecov.

Какво е покритие на кода?

Ако сте запознати с тестването. Знаете основната му цел:

Тестовете дават на разработчиците свобода да правят промени и рефакторират кода с увереността, че всичко трябва да работи добре, докато всички автоматизирани тестове преминат.

Ако обаче модулните тестове не обхващат всички сценарии, все пак има вероятност промените ви да повредят нещо. Ето защо имаме покритие на Code: мярката за това каква част от кодовата база е покрита от автоматизирани тестове.

Без анализ на покритието на Code вашите тестове са загубили основната си цел.

Това е важно, когато вашият проект се разраства и участват много разработчици.

✅ Можем да поддържаме качеството на нашия тест, когато бъде добавен нов код.

Получаваме по-задълбочено разбиране на съществуващите тестове.

✅ Дайте на разработчиците увереност за рефакториране на кода, без да се притеснявате за счупване на нещата.

✅ Можем да хванем непроверени потоци, преди те да създадат проблеми.

Добре, сега, след като знаем какво е покритие на кода, нека го приложим! ?

Предпоставки

За да запазя тази статия кратка и кратка, ще започна тук: Стъпка по стъпка Изграждане и публикуване и NPM Typescript Package.

Какво е направено досега:

Настройте основен 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 е лесно. Просто добавете този ред в конфигурационния си файл:

"collectCoverage":true

colleCoverage: Трябва да бъде зададено на true, ако искате шега да събира информация за покритието, докато изпълнявате тестовете си. (Тестовете ще работят малко по-бавно, така че по подразбиране е невярно.)

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

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

Добре! Бягайnpm testвъв вашия терминал и voilà! Ще имате нова папка с генерирани за вас файлове с покритие на кода.

Не забравяйте да добавите папката за покритие .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! ? ?