Angular 2 Karma 测试“组件名称"不是已知元素 [英] Angular 2 Karma Test 'component-name' is not a known element

问题描述

在 AppComponent 中，我在 HTML 代码中使用了导航组件.用户界面看起来不错.执行 ng serve 时没有错误.当我查看应用程序时，控制台中没有错误.

但是当我为我的项目运行 Karma 时，出现错误:

失败:模板解析错误:'app-nav' 不是已知元素:1. 如果app-nav"是一个 Angular 组件，那么验证它是否是这个模块的一部分.2. 如果'app-nav' 是一个Web 组件，则将'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的'@NgModule.schemas' 以抑制此消息.

在我的app.module.ts中:

有:

import { NavComponent } from './nav/nav.component';

它也在 NgModule 的声明部分

@NgModule({声明: [应用组件，咖啡馆组件，模态组件，导航组件，新闻源组件],进口:[浏览器模块，表单模块，Http模块，Jsonp 模块，ModalModule.forRoot(),模态模块，NgbModule.forRoot(),BootstrapModal 模块，应用路由模块],提供者:[]，引导程序:[AppComponent]})

我在我的 AppComponent

中使用了 NavComponent

app.component.ts

import { Component, ViewContainerRef } from '@angular/core';从'angular2-modal'导入{叠加}；从'angular2-modal/plugins/bootstrap'导入{模态}；从'./nav/nav.component'导入{导航组件}；@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {title = '安吉拉';}

app.component.html

<div class="container-fluid">

我看到了一个类似的问题，但那个问题的答案说我们应该在导航组件中添加 NgModule，其中有一个导出，但是当我这样做时我收到编译错误.

还有:app.component.spec.ts

import {NavComponent} from './nav/nav.component';从@angular/core/testing"导入 { TestBed, async };从 './app.component' 导入 { AppComponent };

解决方案

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

A) 在测试中声明原始 NavComponent

describe('AppComponent', () => {beforeEach(async(() => {TestBed.configureTestingModule({声明: [应用组件，导航组件]}).compileComponents();}));

B) 模拟 NavComponent

describe('AppComponent', () => {beforeEach(async(() => {TestBed.configureTestingModule({声明: [应用组件，模拟导航组件]}).compileComponents();}));//it(...) 测试用例});@成分({选择器:'app-nav'，模板: ''})类 MockNavComponent {}

您可以在官方文档中找到更多信息.

In the AppComponent, I'm using the nav component in the HTML code. The UI looks fine. No errors when doing ng serve. and no errors in console when I look at the app.

But when I ran Karma for my project, there is an error:

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.

In my app.module.ts:

there is:

import { NavComponent } from './nav/nav.component';

It is also in the declarations part of NgModule

@NgModule({
  declarations: [
    AppComponent,
    CafeComponent,
    ModalComponent,
    NavComponent,
    NewsFeedComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    ModalModule.forRoot(),
    ModalModule,
    NgbModule.forRoot(),
    BootstrapModalModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

I'm using the NavComponent in my AppComponent

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>

I have seen a similar question, but the answer in that question says we should add NgModule in the nav component that has a export in that, but I'm getting compile error when I do that.

There is also: app.component.spec.ts

import {NavComponent} from './nav/nav.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

解决方案

Because in unit tests you want to test the component mostly isolated from other parts of your application, Angular won't add your module's dependencies like components, services, etc. by default. So you need to do that manually in your tests. Basically, you have two options here:

A) Declare the original NavComponent in the test

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

B) Mock the NavComponent

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

// it(...) test cases 

});

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

You'll find more information in the official documentation.

这篇关于Angular 2 Karma 测试“组件名称"不是已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！