Angular 2 Karma Test 'component-name' 不是已知元素
在 AppComponent 中，我在 HTML 代码中使用了 nav 组件。用户界面看起来不错。执行 ng serve 时没有错误。当我查看应用程序时，控制台中没有错误。
但是当我为我的项目运行 Karma 时，出现了一个错误：
Failed: Template parse errors:
'app-nav' is not a known element:
1. If 'app-nav' is an Angular component, then verify that it is part of this module.
2. If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
在我的 app.module.ts 中：
有：
import { NavComponent } from './nav/nav.component';
它也在 NgModule 的声明部分
@NgModule({
declarations: [
AppComponent,
CafeComponent,
ModalComponent,
NavComponent,
NewsFeedComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
ModalModule.forRoot(),
ModalModule,
NgbModule.forRoot(),
BootstrapModalModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
我在我的 AppComponent 中使用 NavComponent
app.component.ts
import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'angular2-modal';
import { Modal } from 'angular2-modal/plugins/bootstrap';
import { NavComponent } from './nav/nav.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angela';
}
app.component.html
<app-nav></app-nav>
<div class="container-fluid">
</div>
我看到了一个类似的问题，但是该问题的答案说我们应该在具有导出功能的导航组件中添加 NgModule，但是当我这样做时会出现编译错误。
还有：app.component.spec.ts
import {NavComponent} from './nav/nav.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { NavComponent }
因为在单元测试中，您希望测试与应用程序的其他部分大部分隔离的组件，所以默认情况下，Angular 不会添加模块的依赖项，如组件、服务等。因此，您需要在测试中手动执行此操作。基本上，您有两种选择：
A) 在测试中声明原始的 NavComponent
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
NavComponent
]
}).compileComponents();
}));
B) 模拟 NavComponent
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
MockNavComponent
]
}).compileComponents();
}));
// it(...) test cases
});
@Component({
selector: 'app-nav',
template: ''
})
class MockNavComponent {
}
您可以在 official documentation 中找到更多信息。
您也可以使用 NO_ERRORS_SCHEMA
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));
https://2018.ng-conf.org/mocking-dependencies-angular/
对我来说，在父级中导入组件解决了这个问题。
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
NavComponent
]
}).compileComponents();
}));
将此添加到使用此组件的 spec of the parent 中。
另一个原因是您的测试用例中的 beforeEach() 可以有多个 .compileComponents()
例如
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestComponent]
}).compileComponents();
}));
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientModule],
declarations: [Test1Component],
providers: [HttpErrorHandlerService]
}).compileComponents();
});
第 1 步：在规范文件的开头创建存根。
@Component({selector: 'app-nav', template: ''})
class NavComponent{}
第 2 步：在组件的声明中添加存根。
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent,
NavComponent
],
}).compileComponents();
此错误的另一个来源是对父组件 app-root 的测试，其中包含该组件的标签 app-nav。
即使消息是关于子组件 app-nav 的，也应该在父组件 app-root 的测试中添加修复。
修复可以是一个模拟：
app.component.spec.ts：
@Component({selector: 'app-nav', template: ''})
class NavComponentStub {
}
发生的事情是您创建了根组件，并通过它的测试，它们通过了。稍后您在根组件标签中添加子组件，现在您必须更新根组件测试，即使您只是在模板中添加了一个标签。
此外，消息并没有说明哪个测试失败，并且从消息中您可能会被引导相信这是子组件的测试，而实际上它们是父组件的测试。
如果您创建了一个存根并且仍然得到相同的错误，那可能是因为 --watch 模式打开了。尝试停止它并再次运行。
AppModule更有意义。你会反对这个吗？