覆盖Angular TestBed中另一个模块中的组件

Question

我正在编写TestBed单元测试。

有一个特定的组件，它是被测组件的子组件。测试运行时，该子组件会导致错误。该子组件与测试本身无关；这只是造成问题。

我想用一个假人替换它，或防止它被添加。

有问题的组件来自被测组件以外的其他模块。

我试图做一个存根/虚拟：

@Component({
  selector : 'problematic-component-selector',
  template  : 'FAKE CAPTCHA',
})
export class ProblematicComponentStubComponent {

}

这是我的beforeEach：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      ReactiveFormsModule,
      FormsModule,
      RouterModule,
      ModuleOfProblematicComponent,
    ],
    declarations: [
      ComponentUnderTest,
      ProblematicComponentStubComponent, /* NOTE: here I tried to declare the fake one */
    ],
    providers: [
      { provide: Router, useClass: RouterStub },
      { provide: ActivatedRoute, useClass: Stub },
    ],

我尝试覆盖组件模板，以防止出现以下错误：

TestBed.overrideComponent(ProblematicComponent, {
  set: {
    template: 'Fake Captcha' // prevent ReCaptcha error
  }
})

我知道NO_ERRORS_SCHEMA，但没有帮助。

我也在尝试overrideModule，但没有成功：

TestBed.overrideModule(ModuleOfProblematicComponent, {
  remove: {
    declarations: [ProblematicComponent],
  },
  add: {
    declarations: [ProblematicComponentStubComponent],
  }
});

因此，问题是：是否有可能重写ProblematicComponent（位于模块的其他模块中ComponentUnderTest？

Answer 1

该TestBed#overrideComponent方法将帮助您替换TestBed中任何组件的模板。如果还不够，请使用TestBed#overrideModule替换整个组件（模板和类）。

文档太松散了：https : //angular.io/api/core/testing/TestBed

但是示例更有用：https : //github.com/angular/angular/blob/master/aio/content/examples/testing/src/app/app.component.spec.ts#L74

测试可能也有帮助：https : //github.com/angular/angular/blob/master/packages/platform-b​​rowser/test/testing_public_spec.ts