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

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

假设comp-b 需要在您的comp-A 覆盖中提供comp-AService 和comp-AService，因为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

Answer 2

听从@yurzui 的建议：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [comp-a],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

Answer 3

这是一个老问题，但这是我目前在 Angular 9 中所做的。

由于您希望尽可能地隔离您的测试组件，您可以创建一个返回 假组件 以导入的函数，而不是实际的嵌套组件：

  function mockComponent(selector: string) {
    @Component({
      selector,
      template: ''
    })
    class MockValueAccessorComponent {
      // [mock implementation here]
    }

    return MockValueAccessorComponent;
  }

然后像这样将它导入到您的 TestBed 中：

  TestBed.configureTestingModule({
    declarations: [
      TestUtils.mockComponent('component-template-to-mock'),
    ]
  });