2017-02-25 5 views
1

Ich lerne, wie ich meine ersten Tests mit Angular 2, unter Verwendung angular-cli.eckig cli: Selektoren unbekannt während der Tests

Wenn ich eine neue Komponente MyComponent schaffen, dann app-mycomponent in die App-Vorlage seiner Wähler hinzufügen, werden alle Tests fehlschlagen und sagen, dass app-mycomponent unbekannt ist.

Dieses Problem tritt nur in Tests auf; Wenn ich die App starte, ist alles in Ordnung.

Meine Umgebung:

npm : 3.10.10 
node : 6.9.5 
angular-cli : 1.0.0-beta.32.3 
jasmine-core: 2.5.2 
protractor: 5.1.0 

Anstatt Tonnen Konfigurationsdateien kopieren, hier Schritte zu reproduzieren:

  1. ein neues Projekt erstellen

    ng new testproj 
    cd testproj 
    
  2. eine Komponente erstellen

    ng generate component mycomp 
    
  3. -./src/mycomp/mycomp.component.ts gehen und seine Wähler beachten (sollte app-mycomp sein)

  4. bearbeiten ./src/app/component.html und fügen Sie diese Zeile:

    <app-mycomp></app-mycomp> 
    

    wo app-mycomp ist der Selektor Sie in Schritt sah 3.

  5. Starten Sie die Tests:

    ng test 
    

dann hier die Fehler gemeldet:

Error: Template parse errors: 
'app-mycomp' is not a known element: 
1. If 'app-mycomp' is an Angular component, then verify that it is part of this module. 
2. If 'app-mycomp' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 
{{title}}</h1> 
[ERROR ->]<app-mycomp></app-mycomp>"): [email protected]:0 

Ist es ein Fehler, oder habe ich etwas falsch gemacht? Ich habe versucht, MyComponent als provider in AppComponent, dasselbe Problem manuell einzustellen.

+1

Haben Sie hinzugefügt 'MyComponent' als' declaration', wenn die 'TestBed' für' src/app/App konfigurieren. component.spec.ts'? Das sollte Schritt 5 sein; Wenn Sie die Komponente zur Vorlage hinzufügen, müssen Sie auch sicherstellen, dass sie in den Tests verfügbar ist. – jonrsharpe

+0

@jonrsharpe: das ist ein Teil, den ich finde, aber angular cli scheint das für mich zu tun, in meiner Spezifikationsdatei verwende esforEached zweimal, wo es tut: beforeEach (async (() => { TestBed.configureTestingModule ({ Deklarationen: [MyComponent] }) .compileComponents(); })); before (() => { fixture = TestBed.createComponent (MyComponent); component = fixture.componentInstance; fixture.detectChanges(); }); – Giova

+1

Das sieht wie der Test für MyComponent aus, aber der Fehler sieht wie sein für den Test für AppComponent aus. Dies ist der Test, bei dem Sie die MyComponent zu den Deklarationen hinzufügen müssen. –

Antwort

0

Dank der obigen Kommentare habe ich herausgefunden, was schief gelaufen ist: AppComponent Testmodul wusste nicht, wie MyComponent zu verwenden. Ich weiß noch nicht, was unter der Haube vor sich geht, wenn der Test geladen wird, trotzdem müssen wir alle Komponentenabhängigkeiten auf diese Weise manuell in den Test eingeben: In app.module.spec.ts, edit beforeJedes Verfahren, das ist Aufruf von TestBed.configureTestingModule.

vor:

beforeEach(() => { 
TestBed.configureTestingModule({ 
    declarations: [ AppComponent ], 
}); 

nach:

beforeEach(() => { 
TestBed.configureTestingModule({ 
    declarations: [ 
    AppComponent , 
    MyComponent 
    ], 
}); 
Verwandte Themen