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-browser/test/testing_public_spec.ts

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

1 个答案: