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

Question

我有一个在其模板中使用组件 B、c、D 的组件 A:

###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，您可能不需要在覆盖中专门提供它的依赖项。

只有在组件本身提供依赖项时，才需要在 overrideComponent 中设置 providers。 (如果您在 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.module 中提供您的 TestBed 配置可能如下所示:

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-components-scenarios#nested-component-tests