我正在尝试在使用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.
将ProtModule添加到声明中抛出`错误:模块声明的意外模块'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
添加到声明数组会导致错误抛出。
答案 0 :(得分:15)
当您使用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 },
]
}));
答案 1 :(得分:6)
这是一个真正的问题:你可以模拟导入组件选择器以外的所有内容。
有一种简单的方法。它允许避免导入模块,而只是禁用这种错误。
只需将其添加到您的模块中:
import { NO_ERRORS_SCHEMA } from '@angular/core';
...
TestBed.configureTestingModule({
schemas: [ NO_ERRORS_SCHEMA ],
...
是的,如果您想进行集成(非隔离)测试,它将无济于事,但它完全适用于孤立的测试。
即使你决定导入一个模块,我认为用所有实现的选择器导入mock模块可能更正确。
答案 2 :(得分:0)
在测试我们的Angular应用程序组件时,我经常做的只是通过引用导入父模块。在大多数情况下,它足够或足够接近,并且如果您通过添加新的声明或导入来更改组件,则无需担心更改测试文件,因为测试文件会导入父模块。>
我只更改模块以导入一些外部组件以进行测试,但这很少见。
常规测试初始化伪代码
beforeEach(() => TestBed.configureTestingModule({
declarations: [
ComponentA,
ComponentB
],
providers: [
CellViewComponent
]
}));
让我们说这个组件在一个模块中。我将声明对象放入一个变量中,以便同时在ParentModule和Testing中使用。
export var ParentModuleArgs = {
declarations: [
ComponentA,
ComponentB
],
providers: [
CellViewComponent
]
};
@NgModule(parentModuleArgs)
export class ParentModule {}
然后,我要做的不是取代将整个Module数组重写到测试组件中并且非常干燥。
beforeEach(() => TestBed.configureTestingModule(ParentModuleArgs));
如果我需要添加一些东西,那么我们可以在配置测试台之前添加它
let moduleArgs: NgModule = ParentModuleArgs;
moduleArgs.providers.push({provide: APP_BASE_HREF, useValue: '/'});
beforeEach(() => TestBed.configureTestingModule(ParentModuleArgs));