Plug-and-Play-Tests für ES6

Dieser Beitrag folgt meinem vorherigen Beitrag zum modularen Bibliotheksaufbau, aber Sie müssen ihn nicht zuerst lesen.

Wenn Sie hier sind, kann ich wetten, dass Sie sich der Bedeutung automatisierter Tests bewusst sind.

Ich wollte den unkompliziertesten und einfachsten Weg finden, eine modulare Browserbibliothek zu testen, also hier sind meine Ergebnisse.

Testanzüge

Zunächst benötigen Sie einen Testanzug. Es gibt genug da draußen! Sehr gern haben !!
Lassen Sie uns ein paar und meine Meinung zu jedem von ihnen überprüfen.

Mokka – der Flexible

Mocha ist am beliebtesten und wurde für Browser entwickelt, hat aber meiner Meinung nach zwei Nachteile:

  • Keine Assertion-Bibliothek integriert
  • Wordy im Vergleich zu anderen

AVA – der aufgehende Stern

Um ehrlich zu sein, ich mag AVA. Es hat eine schöne Syntax, führt Tests blitzschnell durch. Der einzige Fallstrick ist, dass es nur Knoten unterstützt und einen zusätzlichen Schritt (und Konfiguration) benötigt, um mit Browser-JS zu arbeiten.

Ist – das Handliche

Die beste Lösung, die ich für unsere Bedürfnisse gefunden habe. Klare Syntax, einfach einzurichten, schnelle, saubere Ausgabe …
Das Sahnehäubchen ist, dass es das gibt dieses webpack-jest-Paket das alles für dich eingerichtet hat.

Verwenden Sie Scherz

Dieser Absatz wird kurz sein.

Fügen Sie zuerst einige Dev-Abhängigkeiten hinzu.

npm install --save-dev jest jest-webpack

Fügen Sie dann ein „test“-Skript in die Datei „package.json“ ein.

"name": "myAwesomePackage",
"scripts": {
    "test": "jest-webpack"
}

Führen Sie abschließend das Skript „test“ mit aus npm test.

Das ist es !

Tests schreiben

Standardmäßig schnappen Sie sich alle Dateien, die mit enden .test.js, .spec.js oder alle Dateien unter a __tests__ Verzeichnis, wie Sie es bevorzugen.

Ich werde nicht die ganze Sache beschreiben, aber der Scherz ist hübsch leicht zu fassen. Lassen Sie mich Ihnen ein aussagekräftiges Beispiel zeigen.

import Unicorn from "./myAwesomePackage.js";
import somethingElse from "AnotherPackage";

// Wrap this test suit
describe("Unicorn", () => {

    // Start every tests with a clean state
    let sparkle;
    beforeAll(() => {
        sparkle = new Unicorn("Sparkle");
    });

    // Some test
    test("instantiate", () => {
        // Simple assertion
        expect(sparkle instanceof Unicorn).toBe(true);
        expect(sparkle.name).toBe("Sparkle");
    });

    // More test
    test("shine", => {
        // String assertion
        expect(sparkle.shine()).toMatch(/🦄/);
        // Every assertion can be reverse using a "not"
        expect(sparkle.shine()).not.toMatch(/💩/);
    });

    // ...
});

Fazit

Sie sollten jetzt in der Lage sein, Ihren ES6-Code mit sehr wenig Einrichtung zu testen. 👍

Gehen Sie jetzt und versuchen Sie, Ihre Codebasis abzudecken. Aber erinnere dich, Intelligentere Tests sind besser als viele Tests.

Wenn Sie ein Live-Beispiel überprüfen möchten, verwende ich dieselbe Technik für mein Projekt der Zeichnungsbibliothek.

Similar Posts

Leave a Reply

Your email address will not be published.