Holen Sie sich Ihr NPM-Paket mit Jest und Codecov covered

Einführung

Lassen Sie uns über die Codeabdeckung sprechen und darüber, wie Sie Abdeckungsberichte in Jest und Codecov erstellen können.

Was ist Code Coverage?

Wenn Sie mit dem Testen vertraut sind. Sie kennen den Hauptzweck:

Tests geben den Entwicklern die Freiheit, Änderungen vorzunehmen und Code zu überarbeiten, mit der Gewissheit, dass alles einwandfrei funktionieren sollte, solange alle automatisierten Tests bestanden werden.

Wenn die Komponententests jedoch nicht alle Szenarien abdecken, besteht dennoch die Möglichkeit, dass Ihre Änderungen etwas beschädigen. Aus diesem Grund haben wir eine Codeabdeckung: das Maß dafür, wie viel der Codebasis durch automatisierte Tests abgedeckt wird.

Ohne Analyse der Codeabdeckung haben Ihre Tests ihren Hauptzweck verloren.

Dies ist wichtig, wenn Ihr Projekt wächst und viele Entwickler beteiligt sind.

✅ Wir können die Qualität unseres Tests beibehalten, wenn neuer Code hinzugefügt wird.

✅ Wir bekommen ein tieferes Verständnis für bestehende Tests.

✅ Geben Sie Entwicklern das Vertrauen, Code umzugestalten, ohne sich Gedanken über Probleme machen zu müssen.

✅ Wir können ungetestete Flüsse auffangen, bevor sie Probleme verursachen.

Ok, jetzt, da wir wissen, was Codeabdeckung ist, lassen Sie es uns implementieren! ?

Voraussetzungen

Um diesen Artikel kurz und prägnant zu halten, beginne ich hier: Schritt für Schritt Erstellen und Veröffentlichen und NPM-Typoskript-Paket.

Was wurde bisher gemacht:

✅ Richten Sie ein NPM-Basispaket ein

✅ Fügen Sie Tests mit Jest hinzu

✅ Schreiben Sie einen Basistest

Wenn Sie Ihr Projekt bereits mit Jest eingerichtet haben, können Sie loslegen. ? Wenn nicht, empfehle ich Ihnen, das Repository zu klonen oder zu teilen, damit dieser Artikel von einer grundlegenden NPM-Paketgrundlage ausgeht:

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

Wenn Sie daran interessiert sind, NPM-Pakete zu erstellen, empfehle ich meinen vorherigen Artikel hier.

Okay, jetzt, wenn alles eingerichtet ist, lass uns gehen!

Erstellen Sie Berichterstattungsberichte in Jest

Das Erstellen von Berichterstattungsberichten in Jest ist einfach. Fügen Sie einfach diese Zeile in Ihre Scherzkonfigurationsdatei ein:

"collectCoverage":true

collectCoverage: Sollte auf true gesetzt werden, wenn Sie möchten, dass Jest während der Ausführung Ihrer Tests Coverage-Informationen sammelt. (Tests werden etwas langsamer ausgeführt, daher ist sie standardmäßig falsch.)

Stellen Sie sicher, dass Ihr Skriptbefehl testin Ihrer Datei package.json Jest mit Ihrer Konfigurationsdatei ausführt .

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

In Ordung! Laufnpm testin Ihrem Terminal und voilà! Sie haben einen neuen Ordner mit Code-Coverage-Dateien, die für Sie generiert wurden.

Vergessen Sie nicht, den Coverage-Ordner hinzuzufügen .gitignore. Wir wollen keine Build-Dateien in unserem Repository. ?

Machen Sie aus Ihren Berichten etwas Nützliches

Ok, das ist cool, wir haben einen Ordner mit einigen Dateien erstellt, aber was sollen wir mit diesen Informationen machen? ?

Zunächst können Sie den Coverage-Bericht auf einer generierten HTML-Seite manuell überprüfen. Öffnen Sie /coverage/lcov-report/index.htmlin Ihrem Browser:

Ok, das ist schön, aber müssen wir die Berichte bei jedem Build WIRKLICH manuell überprüfen?

Nein, das solltest du nicht. Sie sollten die Berichte online veröffentlichen, um sie nützlich zu machen. In diesem Artikel verwenden wir ein Berichterstellungstool mit dem Namen codecov.io.

Codecov ist kostenlos für Open-Source-Projekte. Es bringt Code-Coverage-Berichte auf die nächste Ebene. Mit Codecov können wir auch Badges automatisch generieren und auf kontinuierlichen Integrations-Builds ausführen. (Mehr dazu später.)

Melden Sie sich unter //codecov.io/ an und folgen Sie der Anleitung, um eine Verbindung zu Github und Ihrem Repository herzustellen. Danach sollte ein Bildschirm wie der folgende angezeigt werden:

Nett! Im Moment ist diese Seite leer, da Sie noch keine Berichte hochgeladen haben. Lassen Sie uns das beheben. Führen Sie im Terminal Folgendes aus:

npm install --save-dev codecov

Normalerweise möchten Sie Berichte am Ende eines kontinuierlichen Integrationsbuilds hochladen. In diesem Artikel werden die Berichte jedoch von unserem lokalen Computer hochgeladen. Im Terminallauf:

(Ersetzen Sie durch Ihr Repository-Token im Codec ov.io)

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

Erfolg! Jetzt können Sie Ihren Bericht online in codecov.io anzeigen. ?

//codecov.io/gh///

Fügen Sie Ihrer README.md ein Abzeichen hinzu

Abzeichen sind wichtig, insbesondere für NPM-Pakete. Es gibt den ersten Eindruck von hoher Qualität, wenn Sie in npmjs und Github ein wunderschönes Code-Coverage-Abzeichen sehen.

Fügen Sie in Ihrer README.md die folgende Zeile hinzu:

(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! ? ?