W AppComponent używam komponentu nav w kodzie HTML. Interfejs użytkownika wygląda dobrze. Brak błędów podczas serwowania. i żadnych błędów w konsoli, gdy patrzę na aplikację.
Ale kiedy uruchomiłem Karmę dla mojego projektu, pojawił się błąd:
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.
W moim app.module.ts :
jest:
import { NavComponent } from './nav/nav.component';
Znajduje się również w części deklaracji NgModule
@NgModule({
declarations: [
AppComponent,
CafeComponent,
ModalComponent,
NavComponent,
NewsFeedComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
ModalModule.forRoot(),
ModalModule,
NgbModule.forRoot(),
BootstrapModalModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
Używam NavComponent
w moimAppComponent
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>
Widziałem podobne pytanie, ale odpowiedź na to pytanie mówi, że powinniśmy dodać NgModule do komponentu nawigacyjnego, który ma w tym eksport, ale otrzymuję błąd kompilacji, kiedy to robię.
Jest też: app.component.spec.ts
import {NavComponent} from './nav/nav.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
javascript
node.js
angular
typescript
karma-jasmine
Angela P.
źródło
źródło
import { NavComponent }
w swoich specyfikacjachOdpowiedzi:
Ponieważ w testach jednostkowych chcesz przetestować komponent w większości odizolowany od innych części aplikacji, Angular nie doda domyślnie zależności twojego modułu, takich jak komponenty, usługi itp. Więc musisz to zrobić ręcznie w swoich testach. Zasadniczo masz tutaj dwie opcje:
A) W teście zadeklaruj oryginalny element NavComponent
B) Mock the NavComponent
Więcej informacji znajdziesz w oficjalnej dokumentacji .
źródło
AppModule
Napotkałem problem konieczności importowania wielu komponentów i modułów do punktu, w którym o wiele bardziej sensowne jest po prostu zaimportowanie w konfiguracji TestBed. Czy odradzałbyś to?Możesz także użyć
NO_ERRORS_SCHEMA
https://2018.ng-conf.org/mocking-dependencies-angular/
źródło
Dla mnie importowanie komponentu do rodzica rozwiązało problem.
Dodaj to w
spec of the parent
przypadku użycia tego komponentu.źródło
Jeszcze jeden powód jest taki, że w twoim przypadku testowym może być wiele
.compileComponents()
forbeforeEach()
np
źródło
Krok 1: Utwórz kody pośredniczące na początku pliku specyfikacji.
Krok 2: Dodaj kody pośredniczące w deklaracjach składników.
źródło