106 votes

Angular 2 Karma Test 'nom-composant' n'est pas un élément connu

Dans le AppComponent, je suis en utilisant la valeur liquidative de la composante dans le code HTML. L'INTERFACE a l'air bien. Pas d'erreurs lors ng servir. et aucune erreur dans la console quand je regarde l'application.

Mais quand j'ai couru 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 application.le module.ts:

il y a:

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

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

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

Je suis à l'aide de l' NavComponent mon AppComponent

app.composante.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 semblable question, mais la réponse à cette question nous dit que nous devrions ajouter NgModule de la valeur liquidative composant qui a une exportation, mais j'obtiens le message d'erreur de compilation quand je fais ça.

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

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

162voto

Kim Kern Points 8727

Parce que dans les tests unitaires vous voulez tester le composant principalement isolé à partir d'autres parties de votre application, Angulaire de ne pas ajouter votre module de dépendances comme les composants, les services, etc. par défaut. Si vous avez besoin de le faire manuellement dans vos tests. En gros, vous avez deux options ici:

A) de Déclarer l'origine NavComponent dans le test

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

B) se moquent de l'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'information dans la documentation officielle.

8voto

Adrian Points 119

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/

0voto

Devaarth Points 1

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

pour par exemple

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

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X