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 https://modern-web.dev/docs/test-runner/overview/

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

Configure Web Test Runner

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

npm i -D @web/test-runner

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",

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