Angular 7 Test: NullInjectorError: Kein Anbieter für ActivatedRoute

Hallo, ich habe einen Fehler beim Testen meiner App, die mit Angular 7 erstellt wurde. Ich habe nicht viel Erfahrung mit Angular, daher würde ich Ihre Hilfe benötigen +

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

der Testcode sieht so aus:

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();
    }
  )
)
});

Ich finde wirklich keine Lösung.

Daniele

Sie müssen RouterTestingModule importieren

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

imports: [
    ...
    RouterTestingModule
    ...
]

Fügen Sie den folgenden Import hinzu

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

Ich hatte diesen Fehler auch einige Zeit beim Testen, und keine dieser Antworten hat mir wirklich geholfen. Was es für mich behoben hat, war das Importieren sowohl des RouterTestingModule als auch des HttpClientTestingModule.

Im Wesentlichen würde es in Ihrer Datei “whatever.component.spec.ts” so aussehen.

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

Sie können die Importe von erhalten

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

Ich weiß nicht, ob das die beste Lösung ist, aber das hat bei mir funktioniert.

Dieses Problem kann wie folgt behoben werden:

1. In Ihrer Entsprechung spec.ts Datei importieren RouterTestingModule

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

2. Fügen Sie in derselben Datei hinzu RouterTestingModul als einer der Importe

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

Beispiel für einen einfachen Test mit dem Dienst und ActivatedRoute! Viel Glück!

    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();
    });

    });