Angular 2 Karma Test 'component-name' is not a known element

问题:

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:

'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'; 

回答1:

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

Declare the original NavComponent in the test

app.component.spec

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

Mock the NavComponent

app.component.spec

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: https://angular.io/docs/ts/latest/guide/testing.html#!#isolated-unit-tests

回答2:

You can also use NO_ERRORS_SCHEMA

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

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

文章来源: Angular 2 Karma Test 'component-name' is not a known element