DEV Community

Cover image for Testing in Angular: Replace Karma to Web Test Runner
Dany Paredes
Dany Paredes

Posted on • Updated on

Testing in Angular: Replace Karma to Web Test Runner

I was writing an article for Kendo about testing in Angular, but with the deprecation of Karma, I had some questions about the future of testing in Angular.

I'm using Jest for my personal and professional projects, along with the Angular testing library. However, Jest doesn't have official support from Angular. I'm using community schematics jest schematics to configure Jest in my projects or using Nx. In v16, Angular teams began to add "EXPERIMENTAL" support for Jest, but we haven't received any news or updates.

After talking with Rainer Hahnekamp and Brandon Roberts, both of them recommended starting to use web test runner. In v17, the Angular team added the web-test runner builder in EXPERIMENTAL, and it works great. Also, the Angular teams have plans to add web test runner in future versions.

Read more about

So, I decided to start to play with the web test runner. Let's do it!

This example was using using Angular 17/18.

Configure Web Test Runner

First, install the @web/test-runner package from the terminal.

npm i -D @web/test-runner
Enter fullscreen mode Exit fullscreen mode

Next, open the angular.json file to change the builder to web-test-runner in the test section.

  "test": {
          "builder": "@angular-devkit/build-angular:web-test-runner",
Enter fullscreen mode Exit fullscreen mode

If you are using Angular 14 you must register "polyfills": ["zone.js", "zone.js/testing"], Thanks to @berkon

Save changes, and run your tests with npm run test, and you will see your tests running using Jasmine and web-test-runner. 🎉!


It's important to remmeber, web test runner is in experimental, but looks highly promising about its future as part of Angular working combined with Jasmine, so we don't need to update or change our tests.


Future of Angular Testing 👀

I highly recommend take a time to know about the future of testing in Angular watching amazing great videos from @Rainer Hahnekamp .

Angular Testing in 2024

Angular Testing in 2023: Past, Present, and Future

Photo by Richard Burlton on Unsplash

Top comments (2)

berkon profile image
Bernd Konnerth • Edited

Important note! For Web Test Runner to work it is important that polyfills are specified like this:

"builder": "@angular-devkit/build-angular:web-test-runner",
"options": {
"polyfills": ["zone.js", "zone.js/testing"],


Since Angular 15 it is possible (and necessary) to add the polyfills directly as an array in angular.json and no longer as the file polyfill.ts itself. "zone.js/testing" must also be added manually there in order for Web Test Runner to work.

I came across this issue because my project was created with Angular 14 and the simple explanation in this article did not work. So all projects created prior to Angular 15 must probably be adapted manually.

danywalls profile image
Dany Paredes • Edited

Thanks for your feedback! I'm using Angular 17/18 in my example, I will add your comment into the article.