javascript - navigationend - router events subscribe angular 4

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

Question

En AppComponent, estoy usando el componente de navegación en el código HTML. La interfaz de usuario se ve bien. No hay errores al hacer ng serve. y sin 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 NavComponent en mi 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>

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

Answer 1

Debido a que en las pruebas unitarias desea probar el componente aislado principalmente 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) Declarar el componente original de Nav en la prueba

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

B) Burlarse del componente Nav

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 .

Answer 2

También puedes usar NO_ERRORS_SCHEMA

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

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

Answer 3

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

por ej.

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

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