Codeabdeckung mit vue 2, typescript, mocha und karma
Wir verwenden Vue 2 in Kombination mit Typescript und Webpack 3. Vuex wird für die Statusverwaltung verwendet. Unsere Tests werden mit Karma zusammen mit Mocha, Sinon, Expect und Avoriaz durchgeführt. Alles funktioniert gut, aber ich versuche, Code-Coverage mit Istanbul zu bekommen, um eine bessere visuelle Darstellung der fehlenden Tests zu erhalten.
Kleine Darstellung der Ordnerstruktur
-
src
- Komponenten
- geteilt
- -Taste
- button.vue
- button.ts
- index.ts
- ...
- Komponenten
-
Tests
- Einheit
- Komponenten
- geteilt
- -Taste
- button.spec.test.ts
- Komponenten
- karma.conf.js
- karma.coverage.js
- index.ts
- ...
- Einheit
button.vue
%Vor%button.ts
%Vor%Ich habe derzeit noch nicht einmal eine button.spec.ts erstellt, was ich versuche, das Team mit diesen Informationen zu erreichen, und dies ist das Ergebnis der Code-Coverage:
Die Abdeckung im Allgemeinen im Projekt:
%Vor%Aber im Allgemeinen zeigen die Ergebnisse die Codeabdeckung überhaupt nicht. Jede Datei ist wie folgt:
Meine Fragen
- Wie bekomme ich ein besseres Ergebnis dafür? Fehle ich etwas Grundlegendes über die Codeabdeckung?
- Wie code ich Cover-Funktionen, die nur in .vue-Dateien laufen?
Andere Dateien, die möglicherweise verwandt sind:
karma.coverage.js
%Vor%Einheit / index.ts
%Vor%1 Antwort
Ich würde vorschlagen, dass Sie vue-unit verwenden sollten.
Zum Beispiel könnte Ihr Testfall wie folgt aussehen:
%Vor%Sie können auch das Ergebnis einzelner Methoden überprüfen:
%Vor%Sie sollten auch Erweiterungen zu Chai hinzufügen, wie chai-dom oder sinon-chai , mit dem Sie flexiblere Behauptungen erstellen können:
%Vor% Sie können es in karma.conf.js konfigurieren:
IMHO Ihre Code Coverage-Konfiguration sieht gut aus. Wenn Sie also Tests für Ihre Komponenten hinzufügen, sollte das Ihre Statistiken verbessern.
Tags und Links javascript testing typescript vuejs2 karma-runner