Web background
Dennis, Kiya | 14.8.2023

Unit Testing with Angular >= 14 without TestBed and Inject Function

Web > Unit Testing with Angular >= 14 without TestBed and Inject Function

Since the introduction of Angular 14 by the Angular Team, a new 'inject' function has been implemented. This function enables the use of services or other dependencies in a component without the need of a constructor. However, this requirement leads to the use of the TestBed in testing the service, which can often be slightly frustrating for efficient unit tests.

Angular and Jest logos

However, there is a workaround for this, by importing everything from the @angular/core, and then the jest in combination with spyOn can be used on the inject function. Subsequently, you can simply verify the providerToken and provide the corresponding mock or service as a return value. Here's an example:

1// import * as core from '@angular/core';
2...
3jest.spyOn(core, 'inject').mockImplementation((providerToken => {
4    if (providerToken === ApiService) {
5        return mockApiService;
6    }
7}));
8...

If you want more details on this, Rainer Hahnekamp has released a very good video on the topic.

Content
  • What is the new inject function introduced by Angular 14?
  • How to perform unit tests without TestBed and inject function in Angular 14?
  • How to use jest in combination with spyOn on the inject function?
Dennis Hundertmark
Dennis (Softwareentwickler)

... ist ein begeisterter Frontendentwickler aus Hannover. Am liebsten arbeitet er mit TypeScript und am allerliebsten mit Angular. Schnelles, effizientes Arbeiten und saubere Testabdeckung liegen ihm... mehr anzeigen

Gitlab
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund