Angular-Projekte: Die Test Runner der Zukunft

Über viele Jahre war für das Testen von Frontend-Komponenten eine Kombination aus Jasmine und Karma sehr weit verbreitet. So ist dies aktuell noch das Standard-Testsetup von Angular. Bei  diesem Ansatz wird durch Karma ein echter Browser gestartet, in welchem die Tests ausgeführt werden. Auf der einen Seite ist es immer spannend, zu beobachten, wie Karma dutzende Testfälle innerhalb von kurzer Zeit in einem Browser rendert und ausführt. Andererseits ist der initiale Start des Karma-Test Runners mitunter sehr langsam, zumal immer der passende Browser in der Laufzeitumgebung verfügbar sein muss. Insbesondere im CI-Build kann dies ein Problem sein. Hier werden die Tests oft in einem Chrome im sogenannten Headless-Modus ausgeführt. Hierbei führt der Browser die Tests aus, rendert die Benutzeroberfläche jedoch nicht.

Testen ohne Browser mit dem Jest-Framework

Das ursprünglich von Meta entwickelte Framework Jest führt die Tests in einer Node.js-Umgebung aus und kommt daher komplett ohne Browser aus. Jest erfreut sich insbesondere in der React-Community großer Beliebtheit. Die DOM-API, die zum Testen von Frontends unabdingbar ist, wird bei Verwendung von Jest durch die Bibliothek jest-dom emuliert. Der Vorteil dieses Vorgehens ist eine deutlich schnellere Ausführungszeit der Tests. Es kann zwar vorkommen, dass sich jest-dom in einigen Randfällen leicht anders verhält als ein „echtes“ DOM, insbesondere,  wenn man etwa sehr neue oder nicht besonders verbreitete Funktionen der JavaScript-Browser-Runtime nutzt. Mit Version 16 hat das Angular-Team selbst experimentelle Unterstützung für Jest angekündigt. Selbstredend sollte diese Jest-Unterstützung noch nicht produktiv genutzt werden, da sie sich noch bis zum finalen Release verändern kann.

Von Karma zum Web Test Runner

Eine Nachricht, die dabei untergeht: Karma, der aktuelle Angular-Test Runner, wird nicht mehr weiterentwickelt. Das Angular-Team möchte in Zukunft neben dem auf Node.js-basierenden Jest-Ansatz jedoch auch weiterhin Tests in echten Browsern ermöglichen. Hierfür setzt Angular auf den Web Test Runner. Ab Angular 17.1 ist die Unterstützung für den Web Test Runner als Preview verfügbar. In einem späteren Release wird die Angular-CLI Tests von Karma und Jasmine zu Web Test Runner und Jasmine umwandeln. Es ändert sich also nur der Test Runner, Jasmine zum Schreiben der Tests bleibt erhalten. Im Moment befindet sich die Unterstützung des Web Test Runners jedoch noch in einem sehr frühen Stadium, so dass vom produktiven Einsatz abgesehen werden sollte. 

Wer darauf nicht warten möchte und vielleicht heute schon Cypress für Ende-zu-Ende Tests einsetzt, kann die neuen Cypress Component Tests nutzen. Diese erlauben es Cypress-Tests für (Angular-)Komponenten zu schreiben und diese in einem echten Browser auszuführen.

Wie man sieht, befindet sich Angular Testing gerade ein wenig im Umbruch. Der Abschied von Karma wird eingeläutet und in Zukunft kann man in der Angular CLI zwischen Tests, welche nativ im Browser laufen, und Tests, welche Browserfunktionalität in Node.js emulieren, wählen.  Es wird spannend, zu beobachten, welcher Test Runner in Zukunft die Gunst der Community gewinnen wird.

Übrigens, falls Sie Fragen zum Testing mit Angular haben: Wir bieten einen kurzen Hands-On-Workshop: Testen von Frontends für Entwickler:innen an.