angular - 使用导入模块对 angular2 组件进行单元测试

Question

我正在尝试在使用 angular-material2 的组件上编写测试，但是当我将它添加到我的 testModule 声明时，我得到:

Error: Template parse errors:
    'md-card-title' is not a known element:
    1. If 'md-card-title' is an Angular component, then verify that it is part of this module.
    2. If 'md-card-title' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

将 MaterialModule 添加到声明中会抛出 `Error: Unexpected module 'MaterialModule' declared by the module

DynamicTestModule' in config/spec-bundle.js (line 24994)

这是我的规范文件的样子:

  beforeEach(() => TestBed.configureTestingModule({
    declarations: [],
    providers: [
      { provide: DataService, useValue: mockDataService },
      { provide: ActivatedRoute, useClass: MockActivatedRoute },
      { provide: Router, useValue: mockRouter },
      CellViewComponent
    ]
  }));

将 CellViewComponent 添加到声明数组会引发错误。

Answer 1

当您使用 TestBed.configureTestingModule 时，您从头开始为测试环境创建了一个模块。因此，无论您在实际应用程序中需要什么来让 CellViewComponent 正常工作，您还需要在测试模块中对其进行配置。

在您的情况下，您缺少 Material 卡组件。在应用程序中，您可能将 MaterialModule 或 MdCardModule 导入到您的 AppModule 中。所以你需要在测试模块中做同样的事情

beforeEach(() => TestBed.configureTestingModule({
  imports: [ MaterialModule /* or MdCardModule */ ],
  declarations: [  CellViewComponent ],
  providers: [
    { provide: DataService, useValue: mockDataService },
    { provide: ActivatedRoute, useClass: MockActivatedRoute },
    { provide: Router, useValue: mockRouter },
  ]
}));