如何测试具有嵌套组件的角度2组件及其自身的依赖关系？ （TestBed.configureTestingModule） [英] How to test angular 2 component with nested components inside with their own dependencies ? (TestBed.configureTestingModule)

问题描述

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

I have a component A that use a component B,c,D in its template:

###template-compA.html

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

...等

简化，假设他们只是组件A中的一个指令：

To simplify, let's say their is only one directive in component A:

 ###template-compA.html

    <comp-b></comp-b>

我的comp-b有自己的依赖项（服务或其他comp）。

My comp-b has its own dependencies (services or other comp).

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

If I want to test comp-a this way:

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

它无法正常工作。所以我这样做：

it would not work properly. So I do:

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

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

It doesn't work also because comp-b doesn't have its own dependencies. And here I am confused, how can I do unit test if I have to import and remock all others components every single time ? It looks like a very big amount of work. Is there another way? What would be the best practice to test component with nested componentS that have their own dependencies ?

非常感谢，

Stéphane。

推荐答案

如果您不需要引用 comp-b 以任何方式在测试中，您可以将架构：[NO_ERRORS_SCHEMA]或[CUSTOM_ELEMENTS_SCHEMA] 添加到 TestBed 配置或覆盖 comp-A 的模板并删除 comp-b

If you don't need to reference comp-b in any way in your tests you can add schemas: [NO_ERRORS_SCHEMA] or [CUSTOM_ELEMENTS_SCHEMA] to your TestBed configuration or override the comp-A's template and remove the tag for comp-b

如果你确实需要引用 comp-b ，你可能不需要专门在覆盖中提供它的依赖。

If you do need to reference comp-b you may not need to provide it's dependencies specifically in an override.

只有在组件中提供依赖项时，才需要在 overrideComponent 中设置 providers 本身。 （如果您在 comp-A.ts 中有提供者列表）

Setting providers in overrideComponent is only necessary if the dependency is provided in the component itself. (If you have a providers list in comp-A.ts)

让我们说 comp-b 需要一个 comp-AService 和 comp-AService comp-A 覆盖，因为 comp-b 是 comp-A的孩子它将为它提供 comp-AService 。

let's say comp-b needs a comp-AService and comp-AService is being provided in your comp-A override, since comp-b is a child of comp-A it will have comp-AService provided for it.

如果您提供这些依赖项您的 app.module 或高于您不需要覆盖的组件本身的某个地方。例如，如果 comp-b 需要 comp-AService & someOtherService 这两者都在 app.module中提供<​​/ code>你的 TestBed 配置可能如下所示：

If you are providing these dependencies in your app.module or somewhere higher than the component itself you don't need to override. For example if comp-b needs comp-AService & someOtherService which are both being provided in your app.module your TestBed configuration could look like this:

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

编辑：

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

You can read more about nested component testing here:

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

这篇关于如何测试具有嵌套组件的角度2组件及其自身的依赖关系？ （TestBed.configureTestingModule）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！