Follow Up: Tests hinzufügen (Vue mit Typescript, Babel und Webpack)

Der erste Teil, in dem das Projekt von Grund auf aufgesetzt wird, befindet sich hier: https://affolter.net/vue-mit-typescript-babel-und-webpack/.

Motivation

Software ist nichts ohne automatisierte Tests. Die sichere Weiterentwicklung muss gewährleistet bleiben, deshalb müssen Änderungen sicher sein. Es darf nicht ungewollt etwas Bestehendes fehlerhaft werden.

Tools

Als Unit-Test Runner soll Karma eingesetzt werden. Damit habe ich die meisten Erfahrungen.

Erkenntnisse

  1. Ich hatte Mühe, mir das Setup zusammenzustellen, so dass es zum Rest der Anwendung passt und nicht zuviele Dinge doppelt konfiguriert werden mussten. Ich habe sehr viel herumprobiert, Libraries eingebaut, wieder entfernt und durch Trial and Error den Weg gefunden. Zwischenzeitlich hatte ich mal Jest am Laufen. Eigentlich hat mich diese Library überzeugt. Da man dort aber vieles doppelt hätte konfigurieren müssen und ich beim Builden von Vue-Komponenten mit WithRender und externen HTML- und SCSS-Files nicht weiter gekommen bin, kam ich wieder von diesem Ansatz weg.
  2. Das Schema, bei dem ich schlussendlich gelandet bin, funktioniert wie folgt:
    1. Babel transpiliert auch den Testcode (nach test/lib)
    2. Die Tests werden als Modulpfad (test/lib) in die webpack.config.js aufgenommen.
    3. Karma bekommt Webpack als Preprocessor für das Bundling
  3. Es gibt einen Fehler in karma-webpack (https://github.com/webpack-contrib/karma-webpack/issues/350), der mich Stunden gekostet hat. Es muss die Version 3.0.0 verwendet werden, mit ^3.0.5 geht es bis dato nicht.
  4. Damit Karma im Browser läuft, muss der Code ebenfalls zu einem Bundle verarbeitet werden. Dies kann mit der bestehenden webpack.config.js erreicht werden. Allerdings braucht diese noch Modifikationen:
    1. Für das Testing darf es nicht den normalen "entry-Eintrag" geben
    2. Die Tests müssen als Modulpfad mit ins Bundle
  5. Man braucht viel, viel Geduld, Internet-Recherchen und Nerven, wenn man nicht so genau weiss, wie die einzelnen Libraries funktionieren.

Commit

Ich habe einige Commits "verbraucht", bis ich das richtige Setup gefunden hatte. Aus diesem Grund verzichte ich auf das Kommentieren der Änderungen in jedem einzelnen Commit. Der Stand jetzt, in dem der Build für die Produktion und das Development (mit- und ohne Debug-Server) und auch das Testing funktioniert, befindet sich hier in diesem Commit: https://github.com/Mcafee123/vue-starter/commit/7f484f4b0381da7bde44951039405a3e06326dbe.

Fazit

Ich habe einige Zeit länger gebraucht, als ich erwartet hatte. Ich habe nirgends im Web eine Anleitung gefunden, die alle meine Anforderungen abgedeckt hätte. So musste ich alles aus verschiedenen Quellen zusammensuchen und kombinieren. Trial and Error war die einzige Vorgehensweise, die ich wählen konnte. Eine Schwierigkeit dabei war, dass viele Blog-Einträge und Issues ältere Versionen der eingesetzten Libraries betrafen und so stets überprüft werden musste, ob eine Lösung nach neustem Stand die Richtige ist oder ob es nicht bessere Wege gibt.

Der so erarbeitete Standardaufbau muss sich nun in der Praxis bewähren. Es ist sehr wahrscheinlich, dass er noch zu weit vom Optimum entfernt ist und weitere Anpassungen nötig sein werden.

von - aktualisiert am: