如何使用内部嵌套组件及其自己的依赖项来测试 Angular 2 组件？ (TestBed.configureTestingModule)

我有一个组件 A，它在其模板中使用组件 B、c、D：

###template-compA.html

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

...etc

为了简化，假设它们只是组件 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 没有自己的依赖项。在这里我很困惑，如果我每次都必须导入和重新模拟所有其他组件，我该如何进行单元测试？看起来工作量非常大。还有别的办法吗？使用具有自己的依赖项的嵌套组件测试组件的最佳实践是什么？

多谢，

史蒂芬.

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

如果您确实需要参考comp-b您可能不需要在覆盖中专门提供它的依赖项。

Setting providers in overrideComponent仅当组件本身提供依赖项时才需要。 （如果您有提供者列表comp-A.ts)

比方说comp-b需要一个comp-AService and comp-AService正在您的comp-A覆盖，因为comp-b是一个孩子comp-A它将有comp-AService为其提供的。

如果您在您的app.module或者比组件本身更高的地方，您不需要覆盖。例如如果comp-b needs comp-AService & someOtherService您的app.module your TestBed配置可能如下所示：

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

Edit:

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

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