angular - 如何使用 `entryComponents` 对组件进行浅层测试？

Question

例如，假设您有以下组件:

import { Another } from "./Another";
@Component({
    entryComponents: [
        Another
    ]
})
export class App {}

即使在使用 NO_ERRORS_SCHEMA 时，我仍然必须将 Another 作为测试声明的一部分:

import { ComponentFixture, TestBed } from "@angular/core/testing";
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { App } from "./App";
import { Another } from "./Another";

describe("App", () => {
  let comp: App;
  let fixture: ComponentFixture<App>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ App, Another ],
      schemas: [ NO_ERRORS_SCHEMA ]
    });
    fixture = TestBed.createComponent(App);
    comp = fixture.componentInstance;
  });

  it("can load instance", () => {
    expect(comp).toBeTruthy();
  });

});

Answer 1

他们计划将 EntryComponents 添加到测试模块接口(interface)。查看问题:https://github.com/angular/angular/issues/10760

有关当前的解决方法，请参阅 Angular Material 库，请参阅 https://github.com/angular/components/blob/master/src/material/dialog/dialog.spec.ts#L1660 .

基本上，他们即时创建一个真正的模块，然后将其导入以进行测试。

// Create a real (non-test) NgModule as a workaround for
// https://github.com/angular/angular/issues/10760
const TEST_DIRECTIVES = [
  ComponentWithChildViewContainer,
  PizzaMsg,
  DirectiveWithViewContainer,
  ContentElementDialog
];

@NgModule({
  imports: [MdDialogModule],
  exports: TEST_DIRECTIVES,
  declarations: TEST_DIRECTIVES,
  entryComponents: [ComponentWithChildViewContainer, PizzaMsg, ContentElementDialog],
})
class DialogTestModule { }

现在你可以使用DialogTestModule

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [MdDialogModule.forRoot(), DialogTestModule]
      ...