如何测试具有嵌套组件的角度2组件及其自身的依赖关系？(TestBed.configureTestingModule)

Question

我有一个组件A,它在模板中使用组件B,c,D:

###template-compA.html

    <comp-b></comp-b>
    <comp-c [myinput]="obj.myinput"></comp-c>
    <comp-d ></comp-d>

...等等

为简化起见,假设它们只是组件A中的一个指令:

 ###template-compA.html

    <comp-b></comp-b>

我的comp-b有自己的依赖项(服务或其他comp).

如果我想以这种方式测试comp-a:

TestBed.configureTestingModule({
    declarations: [comp-A],
    imports: [ReactiveFormsModule],
}).overrideComponent(FAQListComponent, {
    set: {
    providers: [
        { provide: comp-AService, useValue: comp-AListSVC }
    ]
    }
})
    .compileComponents();

它不会正常工作.所以我这样做:

TestBed.configureTestingModule({
    declarations: [comp-A, comp-B],
    imports: [ReactiveFormsModule],
}).overrideComponent(FAQListComponent, {
    set: {
    providers: [
        { provide: comp-AService, useValue: comp-AListSVC }
    ]
    }
})
    .compileComponents();

它也不起作用,因为comp-b没有自己的依赖项.在这里我很困惑,如果我必须每次导入和重新安装所有其他组件,我怎么能进行单元测试？它看起来像是一项非常大的工作.还有另外一种方法吗？使用具有自己的依赖关系的嵌套组件测试组件的最佳实践是什么？

非常感谢,

斯特凡.

Answer 1

如果您不需要comp-b在测试中以任何方式引用,则可以添加schemas: [NO_ERRORS_SCHEMA] or [CUSTOM_ELEMENTS_SCHEMA]到TestBed配置中或覆盖comp-A模板并删除标签comp-b

如果您确实需要引用comp-b,则可能不需要在覆盖中专门提供它的依赖项.

设置providers在overrideComponent如果关系在组件本身提供的仅仅是必要的.(如果您有提供者列表comp-A.ts)

让我们说你comp-b需要一个comp-AService并且comp-AService正在你的comp-A覆盖中提供,因为comp-b它的孩子comp-A会comp-AService提供它.

如果要在app.module高于组件本身的位置提供这些依赖项,则不需要覆盖.例如,如果您的配置中提供的comp-b需求comp-AService和someOtherService两者都可能如下所示:app.moduleTestBed

TestBed.configureTestingModule({
  declarations: [comp-A, comp-B],
  imports: [ReactiveFormsModule],
  providers: [
    { provide: comp-AService, useValue: comp-AListSVC },
    { provide: someOtherService, useValue: someOtherServiceSVC }
  ]
})

编辑:

您可以在此处阅读有关嵌套组件测试的更多信息:

https://angular.io/guide/testing#nested-component-tests