Test Angular 7 : NullInjectorError : Aucun fournisseur pour ActivatedRoute

Question

J'ai une erreur lors du test de mon application réalisée avec Angular 7. Je n'ai pas beaucoup d'expérience en angular, donc j'aurais besoin de votre aide+.

Error: StaticInjectorError(DynamicTestModule)[BeerDetailsComponent -> ActivatedRoute]: 
  StaticInjectorError(Platform: core)[BeerDetailsComponent -> ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!

le code de test est comme ceci :

import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { BeerDetailsComponent } from './beer-details.component';
import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';

describe('BeerDetailsComponent', () => {
  let component: BeerDetailsComponent;
  let fixture: ComponentFixture<BeerDetailsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [ BeerDetailsComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BeerDetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create',
  inject(
    [HttpTestingController],
    () => {
      expect(component).toBeTruthy();
    }
  )
)
});

Je ne trouve vraiment pas de solution.

Daniele

Answer 1

Vous devez importer RouterTestingModule

import { RouterTestingModule } from "@angular/router/testing";

imports: [
    ...
    RouterTestingModule
    ...
]

Answer 2

Ajoutez l'importation suivante

  imports: [ 
    RouterModule.forRoot([]),
    ...
  ],

Answer 3

J'ai également eu cette erreur pendant un certain temps lors de tests, et aucune de ces réponses ne m'a vraiment aidé. Ce qui l'a résolu pour moi a été d'importer à la fois le RouterTestingModule et le HttpClientTestingModule.

Donc, essentiellement, cela ressemblerait à ceci dans votre fichier whatever.component.spec.ts.

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ProductComponent],
      imports: [RouterTestingModule, HttpClientTestingModule],
    }).compileComponents();
  }));

Vous pouvez obtenir les importations à partir de

import { RouterTestingModule } from "@angular/router/testing";
import { HttpClientTestingModule } from "@angular/common/http/testing";

Je ne sais pas si c'est la meilleure solution, mais cela a fonctionné pour moi.

Answer 4

Ce problème peut être résolu comme suit :

1. Dans votre correspondance spec.ts fichier d'importation RouterTestingModule

   import { RouterTestingModule } from '@angular/router/testing';

2. Dans le même fichier, ajoutez RouterTestingModule comme l'une des importations

    beforeEach(() => {
       TestBed.configureTestingModule({
       imports: [RouterTestingModule],
       providers: [Service]
     });
    });

Answer 5

Exemple d'un test simple utilisant le service et ActivatedRoute ! Bonne chance !

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
    import { RouterTestingModule } from '@angular/router/testing';
    import { HttpClientModule } from '@angular/common/http';
    import { MyComponent } from './my.component';
    import { ActivatedRoute } from '@angular/router';
    import { MyService } from '../../core/services/my.service';

    describe('MyComponent class test', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let teste: MyComponent;
    let route: ActivatedRoute;
    let myService: MyService;

    beforeEach(async(() => {
        teste = new MyComponent(route, myService);
        TestBed.configureTestingModule({
        declarations: [ MyComponent ],
        imports: [
            RouterTestingModule,
            HttpClientModule
        ],
        providers: [MyService]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('Checks if the class was created', () => {
        expect(component).toBeTruthy();
    });

    });