web-dev-qa-db-fra.com

Angular 2 Le test de Karma 'nom-composant' n'est pas un élément connu

Dans AppComponent, j'utilise le composant nav du code HTML. L'interface utilisateur a l'air bien. Aucune erreur en faisant le service. et pas d'erreurs dans la console quand je regarde l'application.

Mais quand j'ai lancé Karma pour mon projet, il y a une erreur:

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.

Dans mon app.module.ts:

il y a:

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

C'est aussi dans la partie déclarations de NgModule

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

J'utilise le NavComponent dans mon 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>

J'ai vu une question similaire, mais la réponse à cette question dit que nous devrions ajouter NgModule dans la composante de navigation qui comporte une exportation, mais je reçois une erreur de compilation lorsque je le fais.

Il y a aussi: app.component.spec.ts

import {NavComponent} from './nav/nav.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
javascriptnode.jsangulartypescriptkarma-jasmine
73
Angela Pan

Parce que dans les tests unitaires, vous voulez tester le composant principalement isolé des autres parties de votre application, Angular ne va pas ajouter les dépendances de votre module telles que composants, services, etc. Vous devez donc le faire manuellement dans vos tests. En gros, vous avez deux options ici:

A) Déclarez le NavComponent original dans le 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 {
}

Vous trouverez plus d'informations dans le documentation officielle .

118
Kim Kern

Vous pouvez également utiliser NO_ERRORS_SCHEMA

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

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

6
Adrian

Une autre raison est qu'il peut y avoir plusieurs .compileComponents() pour beforeEach() dans votre scénario de test.

par exemple.

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

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

0
Devaarth