javascript - Angular 2 Karma-testi 'component-name' ei ole tunnettu elementti

AppComponentissa käytän nav-komponenttia HTML-koodissa. Käyttöliittymä näyttää hyvältä. Ei virheitä ng serve -komennon suorittamisen aikana, eikä virheitä konsolissa, kun katselen sovellusta.

Mutta kun ajoin Karmaa projektilleni, ilmenee virhe:

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.

Minun app.module.ts tiedostossani:

on:

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

Se on myös NgModulen deklarointiosassa

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

Käytän NavComponent-komponenttia AppComponent-komponentissani

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>

Olen nähnyt samanlaisen kysymyksen, mutta vastauksessa siinä kysymyksessä sanotaan, että meidän pitäisi lisätä NgModule navigaatiokomponenttiin, jolla on export siinä, mutta saan käännösvirheen, kun teen niin.

On myös: app.component.spec.ts

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

Vastaus #1

Koska yksikkötesteissä haluat testata komponenttia pääasiassa erillään sovelluksesi muista osista, Angular ei lisää moduulisi riippuvuuksia kuten komponentteja, palveluita jne. oletuksena. Joten sinun täytyy tehdä se manuaalisesti testeissäsi. Periaatteessa sinulla on tässä kaksi vaihtoehtoa:

A) Ilmoita alkuperäinen NavComponent testissä

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

B) Nauraa NavComponentille

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

// it(...) test cases 

});

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

Löydät lisätietoja virallisesta dokumentaatiosta.

Vastaus #2

Voit myös käyttää NO_ERRORS_SCHEMA

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

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

Aiheeseen liittyviä artikkeleita