Schreiben Sie blitzschnelle Vue-Unit-Tests mit Tape- und Vue-Test-Utils

Tape and Vue - ein Spiel im Himmel

Tape ist das schnellste Framework zum Testen von Vue-Komponenten.

In diesem Artikel erfahren Sie, wie Sie Vue-Komponententests mit Tape- und Vue-Test-Utils schreiben.

Dieses Tutorial richtet sich an Benutzer, die mit Unit-Tests vertraut sind. Wenn Sie mit Unit-Tests noch nicht vertraut sind, lesen Sie Unit-Tests von Vue-Komponenten für Anfänger.

Was ist Tape?

Tape ist ein Bare-Bones-Unit-Test-Framework, das den Testbericht im TAP-Format (Test Anything Protocol) ausgibt.

Es gibt eine einfache API, mit der Sie sicherstellen können, dass sich Ihre JavaScript- und Vue-Komponenten korrekt verhalten.

Warum Tape?

Vor ein paar Wochen habe ich einige Leistungstests auf verschiedenen Test-Frameworks durchgeführt. Ich wollte herausfinden, welches Framework am schnellsten zum Testen von Vue-SFCs (Single File Components) geeignet ist.

Ich habe der Vollständigkeit halber Tape hinzugefügt und war schockiert, als ich feststellte, dass es das Framework mit der schnellsten Leistung ist.

Um Tests in Tape auszuführen, müssen wir einige Einstellungen vornehmen. Tauchen wir gleich ein.

Bootstrapping des Projekts

Zunächst habe ich ein einfaches Startprojekt erstellt. Git klont das Projekt in ein Verzeichnis:

Git-Klon https://github.com/eddyerburgh/jest-vue-starter.git

CD hinein und installiere die Abhängigkeiten:

cd jest-vue-starter && npm install

Führen Sie den dev-Server als npm run dev aus, um die App auszuchecken.

Es ist ziemlich einfach. In diesem Lernprogramm geht es hauptsächlich darum, wie Sie Tape and Vue einrichten und keine komplexen Tests schreiben.

Einrichten von Tape und Vue Test Utils

Als Erstes müssen Sie die Tape and Vue Test Utils installieren:

npm installiere --save-dev tape @ vue / test-utils

Vue Test Utils ist in der Beta-Phase, daher müssen wir die Version explizit anfordern

Vue Test Utils benötigt zum Ausführen eine Browser-Umgebung. Dies bedeutet nicht, dass wir die Tests in einem Browser ausführen müssen (vielen Dank!).

Wir können jsdom verwenden, um eine Browser-Umgebung in Node einzurichten. Es fügt dem Knoten globale Variablen wie Dokument und Fenster hinzu.

jsdom ist ein bisschen mühsam einzurichten. Glücklicherweise hat ein unternehmungslustiger Knotenentwickler eine Wrapper-Bibliothek namens browser-env erstellt.

npm install --save-dev browser-env

Wir müssen browser-env vor den Tests ausführen. Mit Tape können wir festlegen, welche Dateien vor den Tests ausgeführt werden sollen. Dies geschieht in einer Sekunde.

Vue-SFCs müssen kompiliert werden, bevor sie getestet werden. Wir können Require-Hooks verwenden, um WebPack für Dateien auszuführen, wenn sie in Node benötigt werden. Es ist eine einfache Einrichtung.

Installieren Sie zunächst die erforderlichen Erweiterungs-Hooks und ihre Varianten:

npm install --save-dev erfordern-verlängerungs-hooks erfordern-verlängerungs-hooks-babel erfordern-verlängerungs-hooks-vue

Nehmen wir die Setup-Datei vor, über die ich zuvor gesprochen habe. Erstellen Sie ein Testverzeichnis und fügen Sie eine Datei setup.js hinzu. Der endgültige Pfad lautet test / setup.js.

Wir sind fast da. Verrücktes Zeug.

Schreiben wir einen Rauchtest in Tape. Erstellen Sie eine neue Datei mit dem Namen List.spec.js im Testverzeichnis. Vollständiger Pfad test / List.spec.js. Kopieren Sie den folgenden Test in die Datei:

Was ist da los? Wir definieren einen Test und erhalten im Callback ein t-Objekt. Das t-Objekt enthält Assertionsmethoden. Es gibt auch eine Planmethode. Wir müssen Tape mitteilen, mit wie vielen Tests es rechnen soll.

Jetzt brauchen wir ein Skript, um die Tests auszuführen. Öffnen Sie die Datei package.json und fügen Sie das folgende Skript hinzu:

"unit": "tape ./test/specs/*.spec.js -r ./test/setup.js"

Dadurch wird das Band angewiesen, alle .spec-Dateien in test / specs auszuführen. Das -r weist Tape an, vor dem Ausführen unserer Tests test / setup zu fordern oder auszuführen.

Führen Sie die Komponententests durch:

npm run unit

Ja, wir haben eine bestandene Prüfung. Aber Junge, das ist eine hässliche Testausgabe

Erinnerst du dich, dass ich TAP früher erwähnt habe? Dies ist TAP in seiner bloßen Pracht. Ziemlich hässlich, oder? Mach dir keine Sorgen, wir können es verschönern.

Installieren Sie tap-spec:

npm install --save-dev tap-spec

Wir können unsere TAP-Ausgabe vom Band leiten. Bearbeiten Sie das Unit-Skript, um die Ausgabe an die Tap-Spezifikation weiterzuleiten:

"unit": "tape ./test/specs/*.spec.js -r ./test/setup.js | tap-spec"

Führen Sie die Tests erneut aus:

npm run unit

Viel besser

Schreiben von Tests mit Tape und Vue Test Utils

Lassen Sie uns dann einige Tests schreiben. Da wir Vue Test Utils verwenden, sind die Tests ziemlich lesbar.

In List.spec.js schreiben wir einen Test, der ein Elementarray an List übergibt. Wir verwenden die flache Methode von Vue Test Utils, um die Komponente flach zu montieren. shallow gibt einen Wrapper zurück, der die gemountete Komponente enthält. Wir können findAll verwenden, um den Render-Baum nach

  • -Tags zu durchsuchen und zu überprüfen, wie viele es gibt.

    Kopieren Sie den Test von unten in test / specs / List.spec.js.

    Beobachten Sie die Tests mit npm run unit. Beachten Sie, dass wir eine benutzerdefinierte Fehlermeldung für die Behauptung "out t.equals" haben. Die Standardnachrichten sind nicht sehr gut lesbar. Fügen Sie daher besser unsere eigenen hinzu.

    Fügen Sie nun eine neue Datei test / specs / MessageToggle.spec.js hinzu. Hier schreiben wir einen Test für MessageToggle.vue.

    Wir werden jetzt zwei Tests schreiben. Man wird prüfen, ob das

    -Tag eine Standardnachricht darstellt. Erneut verwenden wir shallow, um einen Wrapper mit der eingebundenen Komponente abzurufen, und verwenden die text-Methode, um den Text innerhalb des

    -Tags zurückzugeben.

    Der zweite Test ist ähnlich. Wir werden behaupten, dass sich die Nachricht ändert, wenn die Schaltfläche zum Umschalten der Nachricht gedrückt wird. Dazu können wir die Triggermethode verwenden.

    Kopieren Sie den folgenden Code in test / specs / MessageToggle.spec.js:

    Führen Sie die Tests mit npm run unit erneut aus. Woop - grüne Tests

    Vor- und Nachteile von Tape

    Jetzt haben wir einige Tests hinzugefügt. Sehen wir uns die Vor- und Nachteile der Verwendung von Tape an.

    Vorteile

    • Es ist schnell
       Wie wirklich schnell?
    • Es ist einfach
       Sie können den Quellcode nachlesen
    • Es verwendet TAP.
      Da TAP ein Standard ist, gibt es viele Programme, die direkt mit TAP arbeiten
      Wie das Tap-Spec-Modul haben wir nur TAP-Text in das Modul gepippt und es hat es für uns hübsch gemacht
    • Eingeschränkte Behauptungen
       Mit eingeschränkten Behauptungen bleiben Ihre Behauptungen leicht verständlich

    Nachteile

    • Eingeschränkte Behauptungen
       Dies ist auch ein Betrug
      Mit Zusicherungen wie hasBeenCalledWith können Sie nützliche Fehlermeldungen erhalten. Mit t.equal ist dies schwierig zu replizieren
    • Es bricht
      Wenn Sie mehr als 10000 Tests ausführen
      Das wirst du wahrscheinlich nicht treffen. Aber es könnte ein Deal Breaker für ein großes Vue-Projekt sein
    • Es ist einfach
       Sie müssen andere Bibliotheken zum Verspotten, Stubben und Fälschen verwenden

    Die Vor- und Nachteile sind ziemlich ähnlich. Tape ist einfach, und das kann gut oder schlecht sein, je nachdem, wen Sie fragen.

    Am wichtigsten ist jedoch, dass es schnell geht!

    Schnelle Unit-Tests sind gute Unit-Tests.

    Aufruf zum Handeln

    Der beste Weg, um ein neues Testframework zu entwickeln, besteht darin, es zu verwenden.

    Versuchen Sie beim nächsten Vue-Projekt, das Sie starten, Tape. Eine Liste der Behauptungen finden Sie in der README-Datei für Bänder.

    Viel Spaß

    Das fertige Repo findest du auf GitHub.