After updating my Angular project (including Angular Material) to v19, I am getting new errors like the following in my unit tests:
NullInjectorError: R3InjectorError(Standalone[MyComponent])[CdkStepper -> CdkStepper -> ChangeDetectorRef -> ChangeDetectorRef]:
NullInjectorError: No provider for ChangeDetectorRef! in vendor.js (line 81434)
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'CdkStepper', 'CdkStepper', 'ChangeDetectorRef', 'ChangeDetectorRef' ] })
or
NullInjectorError: R3InjectorError(Standalone[MyComponent])[CdkStepper -> CdkStepper -> ElementRef -> ElementRef]:
NullInjectorError: No provider for ElementRef! in vendor.js (line 81434)
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'CdkStepper', 'CdkStepper', 'ElementRef', 'ElementRef' ] })
What I noticed is that the failing tests are set up like the following:
TestBed.configureTestingModule({
imports: [MyComponent],
providers: [
{ provide: CdkStepper, useClass: CdkStepper },
],
});
In this example the provider for CdkStepper
is necessary, otherwise I'm getting: NullInjectorError: No provider for CdkStepper!
In Angular 18, those unit tests passed. What is the reason that this tests now fail? How can I fix the tests?
I don't know the reason why the tests fail, however the tests can be fixed by providing ChangeDetectorRef
/ ElementRef
manually when configuring the testing module:
TestBed.configureTestingModule({
imports: [MyComponent],
providers: [
{ provide: CdkStepper, useClass: CdkStepper },
{
provide: ChangeDetectorRef,
useValue: {
// here you may need to mock functions like `markForCheck`
},
},
{ provide: ElementRef, useValue: {} },
],
});