web-dev-qa-db-fra.com

NullInjectorError: StaticInjectorError (dynamicestmodule) lors du test de Angular 2

Je suis tout neuf à Angular2 et essayez d'écrire un test dans le fichier app.component.spec.ts. Ma candidature est relativement simple, outre le fait qu'il importe logincomonent et déconnectéComponce d'une bibliothèque 3ème partie (écrite par des collègues). Les composants sont utilisés dans un identifiant de route ou une déconnexion respectivement en ce moment, assez simples. Exécuter ng serve Compile OK et l'application s'exécute "en douceur". Exécuter ng test Cependant, me donne cette erreur:

NullInjectorError: StaticInjectorError(DynamicTestModule)[LogoutComponent -> SessionService]: 
  StaticInjectorError(Platform: core)[LogoutComponent -> SessionService]: 
    NullInjectorError: No provider for SessionService!

LogoutComponent est importé d'un projet différent. Cette erreur signifie-t-elle que je dois aller dans ce projet et faire des changements, ou suis-je censé se moquer de Sessionervice d'une manière ou d'une autre dans mon projet?

Code de spécification:

import {} from 'jasmine';
import {async, TestBed} from '@angular/core/testing';
import {RouterTestingModule} from '@angular/router/testing';
import {AuthErrorStateService, LogoutComponent} from '@custom-library';

import {AppComponent} from './app.component';
import {AppErrorStateService} from './core/error-states/app-error-state.service';
import {TopNavComponent} from './core/top-nav/top-nav.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed
        .configureTestingModule({
          imports: [RouterTestingModule],
          providers: [
            AppErrorStateService, AuthErrorStateService
          ],
          declarations: [AppComponent, TopNavComponent, LogoutComponent],
        })
        .compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'My App'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('My App');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toEqual('Welcome to My App!');
  });
});
javascriptangularunit-testingfrontendangular2-services
8
Ryan Sperzel

Le problème est de déclarer plusieurs composants dans TestBed comme si

 declarations: [AppComponent, TopNavComponent, LogoutComponent]

résultats dans plusieurs composants étant instanciés lorsque le test appelle compileComponents(). Lorsque cela se produit, chaque composant du tableau declarations a besoin de ses dépendances déclarées dans le tableau providers pour compléter l'instanciation. L'un des composants déclarés dépend de SessionService, mais ce service n'est pas présent dans les fournisseurs, vous obtenez donc le NullInjectorError.

Il y a deux solutions à ceci:

  • ne déclarez qu'un composant dans le tableau declarations et ajoutez schemas: [ CUSTOM_ELEMENTS_SCHEMA ] à l'objet de configuration TestBed
  • continuez à déclarer plusieurs composants et à ajouter toutes les dépendances (ou à une maquette de celle-ci) pour chaque composant au tableau providers tableau
4
The Head Rush