Angular 2 Karma Test 'nombre del componente' no es un elemento conocido

En AppComponent, estoy usando el componente de navegación en el código HTML. La interfaz de usuario se ve bien. Sin errores al hacer ng saque. y no hay errores en la consola cuando miro la aplicación.

Pero cuando ejecuté Karma para mi proyecto, hay un 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.

En mi app.module.ts :

Ahi esta:

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

También está en la parte de declaraciones de NgModule

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

Estoy usando el NavComponenten miAppComponent

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>

He visto una pregunta similar, pero la respuesta en esa pregunta dice que deberíamos agregar NgModule en el componente de navegación que tiene una exportación en eso, pero obtengo un error de compilación cuando hago eso.

También hay: app.component.spec.ts

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

Debido a que en las pruebas unitarias desea probar el componente mayormente aislado de otras partes de su aplicación, Angular no agregará las dependencias de su módulo como componentes, servicios, etc. de forma predeterminada. Por lo tanto, debe hacerlo manualmente en sus pruebas. Básicamente, tienes dos opciones aquí:

A) Declare el NavComponent original en la prueba

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

B) Simulacros del NavComponent

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

// it(...) test cases 

});

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

Encontrarás más información en la documentación oficial .

También puedes usar NO_ERRORS_SCHEMA

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

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

Para mí, la importación del componente en el padre resolvió el problema.

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

Agregue esto spec of the parentdonde se usa este componente.

Una razón más es que puede haber múltiples .compileComponents()para beforeEach()en su caso de prueba

por ejemplo

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

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

Paso 1: cree stubs al comienzo del archivo de especificaciones.

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

Paso 2: agregue stubs en las declaraciones del componente.

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