How to improve the unit test running time in Angular

PaperInFlames
3 min readFeb 3, 2023

What is Unit Testing in Angular?

Unit testing in Angular refers to the practice of testing individual components, services, pipes, and other units of an Angular application in isolation from the rest of the application. The goal of unit testing in Angular is to validate that each unit of the application works as intended and meets the requirements.

It helps to ensure that the components and services of the application are functioning correctly, which in turn helps to catch bugs early in the development cycle, improving the quality and reliability of the application. It also makes it easier to make changes to the codebase in the future, as changes can be tested automatically before being deployed to production.

In Angular, unit tests are typically written using a testing framework such as Jasmine. Tests are run using Angular CLI. Whereas Karma is a test runner tool that executes our logic against the unit tests, runs a server, and displays the test results in multiple browsers (By default it opens in Chrome). Unit tests are stored in the spec.ts file

What is TestBed in Jasmine?

The TestBed is a testing module in the Jasmine framework that provides a way to configure and run tests for Angular components and services. It is used to set up the environment for the tests, create instances of the components and services, and provide APIs for interacting with the components and services being tested.

When we create a component/module in VS code, respective spec files get generated with some unit tests automatically, we can update the existing ones and write new tests as per our requirement.

Example of a spec file that got generated while creating an app:

appcomponent.spec.ts with TestBed

Drawbacks of TestBed:

When we use TestBed to write tests, there will be performance issues while working on a complex project.

For E.g., If a project has 9,000 unit tests, it will take around 8–10 min to execute those unit tests. But using the below approach we can execute 40,000 unit tests in just 4 min. Imagine the difference, we can have a huge performance gain. Let’s see how we can achieve it.

For Better performance:

If we remove TestBed, DOM is no longer tested, only the components are tested. Hence, there will be a drastic performance difference.

appcomponent.spec.ts without TestBed

Drawbacks of the above approach:

We can’t test the templates/HTML elements, we can only test the component’s logic.

Summary:

We can choose the above method only to test the component’s logic. If we want to test the HTML elements we have to choose the test bed.

Hope this helps 😀🫠

Originally published at https://udayasindhu.blogspot.com on February 3, 2023.

--

--