Testing in Angular: Replace Karma to Web Test Runner
Tags: angular, javascript, frontend
Published: 2024-05-13 17:22:51

I was writing an article for [Kendo](https://www.telerik.com/blogs/author/dany-paredes) 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](https://github.com/briebug/jest-schematic) to configure Jest in my projects or using Nx. In v16, Angular teams began to add ["EXPERIMENTAL"](https://www.danywalls.com/play-with-jest-builder-for-angular-17-experimental) support for Jest, but we haven't received any news or updates.

After talking with [Rainer Hahnekamp](https://hashnode.com/@rainerhahnekamp) and [Brandon Roberts](https://hashnode.com/@brandonroberts), both of them recommended starting to use [web test runner](https://modern-web.dev/docs/test-runner/overview/). 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](https://blog.angular.io/moving-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca) in future versions.

> Read more about [https://modern-web.dev/docs/test-runner/overview/](https://modern-web.dev/docs/test-runner/overview/)

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.

```bash
npm i -D @web/test-runner
```

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

```json
  "test": {
          "builder": "@angular-devkit/build-angular:web-test-runner",
```


> 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`. 🎉!

![x](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/godel2dxewv16xwt5ivq.png)

It's important to remmeber, [web test runner](https://modern-web.dev/docs/test-runner/overview/) 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.


![x](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3kbj1qhyubiu3huj80w.png)

## 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](@rainerhahnekamp) .

### Angular Testing in 2024

- https://www.youtube.com/watch?v=MQd9yRBZSKY] 

### Angular Testing in 2023: Past, Present, and Future

- https://www.youtube.com/watch?v=4z5IhNdonv8&t=1s

Photo by <a href="https://unsplash.com/@richardworks?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Richard Burlton</a> on <a href="https://unsplash.com/photos/a-black-and-brown-dog-laying-on-top-of-a-pile-of-wood-chips-JwyG4F2cOWQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>