单元测试带有导入模块的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添加到声明中会抛出`错误:模块声明的意外模块'MaterialModule'

config/spec-bundle.js中的DynamicTestModule'(第24994行)

这是我的spec文件的样子:

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

添加CellViewComponent到声明数组会导致错误抛出.

Answer 1

当您使用时TestBed.configureTestingModule,您将从头开始为测试环境创建一个模块.因此,无论您在实际应用程序中需要什么CellViewComponent,您还需要在测试模块中进行配置.

在您的情况下,您错过了材料卡组件.在应用程序中,您可能要么导入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 },
  ]
}));

Answer 2

这是一个真正的问题:您可以模拟除导入组件的选择器之外的所有内容.

有一个简单的方法.它允许避免导入模块,而只是禁用这种错误.

只需将其添加到您的模块:

import { NO_ERRORS_SCHEMA } from '@angular/core';

...

TestBed.configureTestingModule({
  schemas: [ NO_ERRORS_SCHEMA ],
  ...

Angular2文档链接

是的,如果您想进行集成(非隔离)测试,它将无济于事,但它完全适用于孤立的测试.

即使你决定导入一个模块,我认为用所有实现的选择器导入mock模块可能更正确.