Unit-Tests sind ein wichtiger (und manchmal ignorierter) Bestandteil bei der Entwicklung von Anwendungen. Sie helfen uns, unsere Prozesse und Arbeitsabläufe zu sichern und sicherzustellen, dass die kritischsten Teile unserer Projekte vor versehentlichen Fehlern oder Versehen in unserer Entwicklung geschützt sind. Aus diesem Grund verfügt Vue über eine eigene Test Utility namens vue-test-utils. Es bietet nützliche Funktionen für die Interaktion mit Vue-Komponenten und funktioniert mit vielen gängigen Test runners.
Vuetify verwendet Typescript und muss derzeit das Vue-Objekt importieren und erweitern. Dies hat in einigen Anwendungen das Potenzial, eine Warnung zu generieren. $attrs oder $listeners ist schreibgeschützt. Derzeit läuft eine Github-Diskussion mit potenziellen Problemumgehungen in einer Vielzahl von Anwendungsfällen. Wenn Sie weitere Fragen haben, treten Sie uns bitte in unserer Online-Community bei.
Informationen zum Einrichten eines Test Runners mit der Vue CLI finden Sie in der offiziellen Dokumentation. Auf einen Blick hat Vue CLI Repositories für die folgenden Test Runner eingerichtet:
Um Typescript ordnungsgemäß zu verwenden, erweitern Vuetify-Komponenten das Vue-Objekt. Dies kann Probleme verursachen, wie in der obigen Warnung angegeben. Anstatt eine localVue-Instanz zu verwenden, müssen wir Vuetify global in der Setup-Datei für Komponententests installieren. Dies kann zwischen den Test Runners variieren. Stellen Sie sicher, dass Sie auf die entsprechende Dokumentation zu den Setup-Dateien verweisen.
Wenn Sie keine setup.js-Datei verwenden, sollten Sie Vue.use(Vuetify) in dem Utilities-Abschnitt Ihrer Tests hinzufügen.
Das Erstellen von Komponententests in Vuetify ähnelt vuex und vue-router, da Sie das Vuetify-Objekt in einer localVue-Instanz verwenden und eine Instanz an die Mount-Funktionsoptionen übergeben.
Lassen Sie uns einen beispielhaften Testanwendungsfall erstellen, den wir möglicherweise in unserer Anwendung finden.
Im obigen Beispiel haben wir eine benutzerdefinierte Komponente mit einer title-prop und einem v-btn erstellt, der beim Klicken ein benutzerdefiniertes Ereignis ausgibt. Wir möchten jetzt Tests erstellen, die sicherstellen, dass dieses Verhalten korrekt funktioniert und dies auch bei zukünftigen Änderungen tut. Die folgenden Beispiele werden mit dem Test Runner Jest erstellt.
Wenn Sie nicht weiterkommen und weitere Fragen zum Testen haben oder generell Hilfe benötigen, treten Sie bitte unserer Online-Community bei.
Wenn Sie Tests schreiben, werden Sie oft feststellen, dass Sie dieselben Dinge immer und immer wieder wiederholen. In diesem Fall ist es vorteilhaft, Hilfsfunktionen zu erstellen, um die Duplizierung für jeden einzelnen Test zu verringern. Einfach DRYing unseren Code.
Einer der am häufigsten in Komponententests geschriebenen duplizierten Code-Abschnitte sind die Mount-Funktionen. Diese können leicht zu einer wiederverwendbaren Funktion für jeden Lauf reduziert werden.
Viele der Vuetify-Komponenten verwenden das globale $vuetify-Objekt, um Einstellungen wie Standardtext oder Haltepunktinformationen abzuleiten. Wenn Sie diese Komponenten testen, müssen Sie den vue-test-utils ein gemocktes Objekt bereitstellen.
Denke Sie daran, dass Sie die Dienste nur ersetzen müssen, wenn Sie benutzt werden. Beispielsweise lang oder application. Diese können Sie auch manuell importieren.
Eine vollständige Liste aller verfügbaren Dienste ist unten aufgeführt:
Vuetify übergibt data-*-Attribute von Komponenten an die relevanten HTML-Elemente, sodass das E2E-Testframework diese leicht finden kann.
Beispielsweise empfiehlt Cypress ein data-cy-Attribute hinzuzufügen, um Elemente einfacher auffindbar zu machen.
Bereit für mehr? Weiter lesen mit: