How to unit test your Angular 9 application using karma testing framework.

In this article I will offer the best tips and techniques for unit and integration testing your Angular 9 applications.

1 — Create a new Angular 9 application

First let’s create a simple Angular 9 application which we will use for the demonstration purposes of how to implement unit testing.

If you want a detailed step-by-step tutorial showing you how to create a new Angular 9 application, I have written an article that details the process. You can see it here:

How to start a new Angular 9 Project in few easy steps

Run the following command in you VScode terminal:

ng new UnitTestExample

and follow the prompts on the screen. Creating the application will take few minutes to download all of the necessary dependencies. Once the application is completed successfully you will get a prompt in the terminal indicating so.

Please not that the Angular CLI downloads and installs everything you need to test your application with the Jasmine test framework (link). This makes it much more easier on you as a developer. Right off the bat you do not need to perform any configuration.

As soon as the application is created successfully you will be able to notice that Karma is already part of the application. Below is a screen shot showing you the “src/karma.conf.js” file that is created.

2 — How to run the unit tests for your application

I would like to point out that by default when you create a new component in your application, Angular CLI will automatically create a “spec” file along with the other files needed for a component to be created unless you specifically tell it not to.

If you navigate to “src/app/” you will notice the following file: “src/app/app.component.spec.ts”. This is the file where unit tests live for the actual “src/app/app.component.ts”. The convention for Angular applications…