Prueba de Angular 7: NullInjectorError: No hay proveedor para ActivatedRoute

4 minutos de lectura

Avatar de usuario de Daniele Caputo
Daniele Caputo

Hola, tengo un error al probar mi aplicación hecha con Angular 7. No tengo mucha experiencia en angular, por lo que necesitaría su ayuda.+

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

el código de prueba es así:

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

Realmente no puedo encontrar ninguna solución.

daniel

Avatar de usuario de RaulDanielPopa
RaulDanielPopa

Tienes que importar RouterTestingModule

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

imports: [
    ...
    RouterTestingModule
    ...
]

  • Cuando hago esto, empiezo a recibir el error. NullInjectorError: No provider for ActivatedRoute!

    –Ross Brasseaux

    3 de julio de 2020 a las 20:24

  • ¿Importó este módulo al archivo de especificaciones?

    – Raúl Daniel Popa

    4 de agosto de 2020 a las 19:24

  • Creo que la solución fue agregar un proveedor para la ruta, usando un objeto anónimo que contiene las propiedades a las que accede la prueba.

    –Ross Brasseaux

    4 de agosto de 2020 a las 19:33

  • Esta debería ser la respuesta aceptada.

    –Alfredo A.

    10 de febrero a las 14:54

  • Si vas a llegar a esto en 2022, entonces RouterTestingModule ahora vives en @angular/common/http/testing

    –Mike Poole

    4 de julio a las 13:56

Agregue la siguiente importación

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

  • ¿Dónde debo importar RouterModule.forRoot ([]),?

    – Daniele Caputo

    6 de diciembre de 2018 a las 15:14

  • en el modulo import { RouterModule } from '@angular/router';

    – Sachila Ranawaka

    6 de diciembre de 2018 a las 15:14

  • RouterModule no debe incluirse en los archivos de prueba

    – Arjun pánico

    16 de abril de 2020 a las 11:01

  • esa no es una solución adecuada, por lo que debe definir todos los parámetros del proveedor del módulo roter, el token APP_BASE_HREF, etc. Use en su lugar RouterTestingModule sin declaraciones de proveedor de enrutador

    – cagcak

    29 de mayo de 2020 a las 11:18

  • Sería una buena respuesta si indicara dónde se debe agregar la importación

    – Nadie en alguna parte

    10 de diciembre de 2020 a las 9:34

También tuve este error durante algún tiempo durante las pruebas, y ninguna de estas respuestas realmente me ayudó. Lo que me solucionó fue importar tanto RouterTestingModule como HttpClientTestingModule.

Entonces, esencialmente, se vería así en su archivo Anyway.component.spec.ts.

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

Puede obtener las importaciones de

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

No sé si esta es la mejor solución, pero funcionó para mí.

Este problema se puede solucionar de la siguiente manera:

  1. En su correspondiente especificaciones importar archivo RouterTestingModule

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

  2. En el mismo archivo agregar Módulo de prueba del enrutador como una de las importaciones

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

¡Ejemplo de una prueba simple usando el servicio y ActivatedRoute! ¡Buena suerte!

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

    });

  • Estas usando teste ¿en cualquier sitio? para que se necesita?

    – JSON derulo

    21 de agosto de 2020 a las 9:19

  • Lo uso en todos los lugares donde trabajo, una forma de garantizar que la aplicación siga funcionando después de algún cambio sin romper mi código.

    – Cherma Ramalho

    11/09/2020 a las 17:00

  • Estas usando teste ¿en cualquier sitio? para que se necesita?

    – JSON derulo

    21 de agosto de 2020 a las 9:19

  • Lo uso en todos los lugares donde trabajo, una forma de garantizar que la aplicación siga funcionando después de algún cambio sin romper mi código.

    – Cherma Ramalho

    11/09/2020 a las 17:00

¿Ha sido útil esta solución?