angularangular-materialangular-unit-testangular19

After updating to Angular 19, some unit tests fail with NullInjectorError: No provider for ChangeDetectorRef


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?


Solution

  • 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: {} },
      ],
    });