Angular单元测试报错NullInjectorError：缺少BillingPageComponent提供者

1. 排查构造函数的依赖注入逻辑 #

你大概率是错误地将BillingPageComponent作为依赖注入到BillingPaymentComponent的构造函数中——Angular组件本身不属于可注入的服务范畴，不能通过构造函数注入。组件间的交互应该使用@Input/@Output传递数据、@ViewChild/@ViewChildren获取组件实例这类方式，而非依赖注入。

如果你的BillingPaymentComponent构造函数写了类似代码：

constructor(private billingPage: BillingPageComponent) {}

这就是问题根源，需要删除该注入逻辑，替换为组件间交互的正确实现方式。

2. 修正测试模块配置（若确实需要处理组件依赖） #

如果有特殊场景必须在测试中处理组件依赖，需注意以下两种正确方式：

• 创建模拟组件替代：如果不想使用真实的BillingPageComponent，可以定义一个空的模拟组件，在测试模块的declarations中声明：

  @Component({selector: 'app-billing-page', template: ''})
  class MockBillingPageComponent {}
  
  TestBed.configureTestingModule({
    declarations: [BillingPaymentComponent, MockBillingPageComponent]
  });
  

  注意：组件要放在declarations而非providers中，providers是用于配置服务的。
• 忽略未知组件（临时方案）：如果只是想快速验证组件逻辑，可添加NO_ERRORS_SCHEMA让Angular忽略模板中未声明的组件选择器：

  import { NO_ERRORS_SCHEMA } from '@angular/core';
  
  TestBed.configureTestingModule({
    declarations: [BillingPaymentComponent],
    schemas: [NO_ERRORS_SCHEMA]
  });
  

  此方式仅适合临时测试，不推荐长期使用，会掩盖潜在的模板错误。

3. 验证测试配置的正确性 #

确保测试模块中组件和服务的配置方式不混淆：

• 服务需放在providers中，可用jasmine.createSpyObj创建模拟对象；
• 组件需放在declarations中，要么用真实组件，要么用模拟组件。

示例（假设BillingPaymentComponent依赖的是服务而非组件）：

TestBed.configureTestingModule({
  declarations: [BillingPaymentComponent],
  providers: [
    { provide: BillingService, useValue: jasmine.createSpyObj('BillingService', ['getInvoice']) }
  ]
});

内容的提问来源于stack exchange，提问作者Bruce Hall