Angular 19升级后单元测试报NullInjectorError问题排查与修复

报错原因 #

Angular 19对CDK组件的依赖注入逻辑做了严格调整。在Angular 18中，手动在测试模块的providers里直接提供CdkStepper类时，测试框架会隐式关联组件上下文的内置依赖（比如ChangeDetectorRef、ElementRef）；但Angular 19中，CdkStepper作为需要依附组件实例的指令，直接通过useClass: CdkStepper提供时，无法获取到组件级注入器提供的这些上下文依赖——ChangeDetectorRef和ElementRef都是绑定到具体组件实例的，只能由组件自身的注入器提供，而非根注入器。

修复方法 #

方法1：使用模拟类替代真实CdkStepper #

创建仅包含组件所需属性和方法的模拟类，避免依赖组件上下文的内置服务：

// 模拟CdkStepper，只实现组件用到的成员
class MockCdkStepper {
  selectedIndex = 0;
  next = jasmine.createSpy('next');
  previous = jasmine.createSpy('previous');
  // 根据组件实际使用情况添加其他属性/方法
}

TestBed.configureTestingModule({
  imports: [MyComponent],
  providers: [
    { provide: CdkStepper, useClass: MockCdkStepper },
  ],
});

方法2：导入CdkStepperModule而非手动提供 #

如果需要使用真实的CdkStepper功能，直接导入CdkStepperModule，让Angular自动处理其依赖注入上下文：

TestBed.configureTestingModule({
  imports: [MyComponent, CdkStepperModule],
  // 移除手动添加的CdkStepper提供者
});

这样Angular会在组件实例化时，自动为CdkStepper注入所需的ChangeDetectorRef和ElementRef，符合Angular 19的依赖注入规则。

方法3：通过组件上下文提供CdkStepper #

如果组件是从父组件获取CdkStepper实例，可在测试中创建父组件并提供CdkStepper，确保依赖在正确的注入层级：

// 示例：创建包含CdkStepper的测试父组件
@Component({
  template: '<app-my-component></app-my-component>',
  providers: [{ provide: CdkStepper, useClass: MyCustomStepper }]
})
class TestParentComponent {}

TestBed.configureTestingModule({
  imports: [MyComponent, CdkStepperModule],
  declarations: [TestParentComponent]
});

// 测试时创建父组件实例
fixture = TestBed.createComponent(TestParentComponent);

内容的提问来源于stack exchange，提问作者JSON Derulo