角2Karma 测试“组件名称”不是已知元素

在 AppComponent 中，我在 HTML 代码中使用了 nav 组件。用户界面看起来不错。发球没有失误。当我查看应用程序时，控制台没有错误。

但当我为我的项目运行 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.

在我的 应用程序模块中:

有:

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

应用程序组件

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';
77031 次浏览
小开
最佳答案

因为在单元测试中，您希望测试主要与应用程序的其他部分隔离的组件，所以在默认情况下，Angular 不会添加模块的依赖项，如组件、服务等。所以您需要在您的测试中手动执行此操作。基本上，你有两个选择:

A)在测试中声明原来的 NavComponent

describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
NavComponent
]
}).compileComponents();
}));

B)嘲笑导航组件

describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
MockNavComponent
]
}).compileComponents();
}));


// it(...) test cases


});


@Component({
selector: 'app-nav',
template: ''
})
class MockNavComponent {
}

你可以在 正式文件中找到更多的信息。

小开

也可以使用 NO_ERRORS_SCHEMA

describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));

Https://2018.ng-conf.org/mocking-dependencies-angular/

小开

另一个原因是，在您的测试用例中，beforeEach()可能有多个 .compileComponents()

例如:。

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestComponent]
}).compileComponents();
}));


beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientModule],
declarations: [Test1Component],
providers: [HttpErrorHandlerService]
}).compileComponents();
});
小开

对于我来说，在父级中导入组件解决了这个问题。

describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
NavComponent
]
}).compileComponents();
}));

在使用这个组件的 spec of the parent中添加这个。

小开

步骤1: 在 spec 文件的开头创建存根。

@Component({selector: 'app-nav', template: ''})
class NavComponent{}

步骤2: 在组件的声明中添加存根。

TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent,
NavComponent
],
}).compileComponents();
小开

此错误的另一个来源是父组件 app-root 的测试，其中包含此组件 app-nav 的标记。

即使消息是关于 app-nav (子组件)的，也应该在 app-root (父组件)的测试中添加补丁。

解决方案可以是一个模拟:

返回文章页面

@Component({selector: 'app-nav', template: ''})
class NavComponentStub {
}

您创建了根组件，它的测试通过了。后来您在根组件标记中添加了子组件，现在您必须更新根组件测试，即使您只是在模板中添加了一个标记。

此外，该消息没有说明哪个测试失败，并且从该消息中您可能被引导相信它是子组件的测试，而实际上它们是父组件的测试。

小开

如果您创建了一个存根，但仍然得到相同的错误，这可能是因为—— watch 模式打开了。试着停下来再跑一次。


提交答案