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!
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
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",
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 (5)
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.
Thanks for your feedback! I'm using Angular 17/18 in my example, I will add your comment into the article.
I've been disappointed in not having update during 2024 really on the progress. I'd love to get off of karma, but since we use our unit tests for code coverage, the lack of support of coverage and source maps makes the experimental builder not feasible for us to use at this time.
Anyone have any knowledge of where this project lies? I see no git commits for web-test-runner in angular/angular either, it almost seems like the effort has been abandoned.
I have been unable to find any recent discussion on the topic in github either.
ng 18:
SchemaValidationException [Error]: Schema validation failed with the following errors:Data path "" must NOT have additional properties(karmaConfig).
I had the same problem. By removing the entry "karmaConfig" from the test-options in angular.json, the issue was solved.
I am however still stuck with @import-statements errors in my component stylesheets.