为了账号安全,请及时绑定邮箱和手机立即绑定

Angular 2 Karma Test'component-name'不是一个已知元素

/ 猿问

Angular 2 Karma Test'component-name'不是一个已知元素

在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.

在我的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]

})

我NavComponent在我的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>

我已经看到了类似的问题,但是该问题的答案表明我们应该在具有导出功能的nav组件中添加NgModule,但是这样做时会出现编译错误。


还有:app.component.spec.ts


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

import { TestBed, async } from '@angular/core/testing';

import { AppComponent } from './app.component';


查看完整描述

3 回答

?
慕妹3242003

因为在单元测试中,您想测试大部分与应用程序其他部分隔离的组件,所以默认情况下,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 {

}

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


查看完整回答
反对 回复 2019-12-27
?
喵喔喔

您也可以使用 NO_ERRORS_SCHEMA


describe('AppComponent', () => {

beforeEach(async(() => {

  TestBed.configureTestingModule({

    declarations: [

      AppComponent

    ],

    schemas: [NO_ERRORS_SCHEMA]

  }).compileComponents();

}));

https://www.ng-conf.org/mocking-dependencies-angular/


查看完整回答
反对 回复 2019-12-27
?
45度呼吸

对于我来说,将组件导入父级解决了该问题。


describe('AppComponent', () => {

  beforeEach(async(() => {

      TestBed.configureTestingModule({

        declarations: [

          AppComponent,

          NavComponent

        ]

      }).compileComponents();

    }));

在spec of the parent使用此组件的位置添加它。


查看完整回答
反对 回复 2019-12-27

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信