0

Estaba desarrollando una App en Angular, y estaba implementando la parte de testing de uno de los componentes que conforman la App.

El tema esq la App estaba funcionando bien, y derepente al intentar implementar un nuevo test, me he encontrado con el siguiente error que veis a continuación debajo:

Karma:`



Error: Cannot configure the test module when the test module has already been instantiated. Make sure you are not using `inject` before `TestBed.configureTestingModule`.

Y este es el archivo spec.ts:


import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { OrangeApi } from '@orange/redux';
import { EscaparateBannerComponent } from './escaparate-banner.component';
import { Observable } from 'rxjs/Observable';
import { CurrentDataService } from '../../services/current-data.service';

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

  beforeEach(async(() => {

    fixture = TestBed.createComponent(EscaparateBannerComponent);
    component = fixture.componentInstance;
    component.moduleData = require('../../testing/moduleData.json');
    fixture.detectChanges();

    const orangeApiStub = () => ({
      post: () => true,
      get: () => true
    });

    const CurrentDataServiceStub = () => ({
      getCurrentData: () => Observable.of({}),
      setCurrentData: () => Observable.of({}),
      setFullCurrentData: () => null
    });

    TestBed.configureTestingModule({
      declarations: [ EscaparateBannerComponent ],
      providers: [
        { provide: OrangeApi, useFactory: orangeApiStub },
        { provide: CurrentDataService, useFactory: CurrentDataServiceStub }
      ]
    })
    .compileComponents();
  }));
 
  //DONE
  it('getBannerModuleData', () =>{

     expect(component).toBeTruthy(); 

    spyOn(component, 'getBannerModuleData').and.callThrough();
    component.getBannerModuleData();
    expect(component.getBannerModuleData).toHaveBeenCalled();
    });

    //DONE
    it('searchBanner', () => {

    spyOn(component, 'searchBanner').and.callThrough();
    component.getBannerModuleData();
    expect(component.searchBanner).toHaveBeenCalled();


    });
  });
  

Si teneís idea de por donde van los tiros gracias de ante mano!

1 respuesta 1

1

Parece ser un problema del orden en el que estas ejecutando las tareas dentro del beforeEach, prueba con este orden:

Al parecer estabas pidiendo datos del modulo y luego inicializandolo, asi que el orden importa, prueba asi a ver que tal va

import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { OrangeApi } from '@orange/redux';
import { EscaparateBannerComponent } from './escaparate-banner.component';
import { Observable } from 'rxjs/Observable';
import { CurrentDataService } from '../../services/current-data.service';

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

    beforeEach(async(() => {
        const orangeApiStub = () => ({
            post: () => true,
            get: () => true
        });

        const CurrentDataServiceStub = () => ({
            getCurrentData: () => Observable.of({}),
            setCurrentData: () => Observable.of({}),
            setFullCurrentData: () => null
        });

        TestBed.configureTestingModule({
            declarations: [EscaparateBannerComponent],
            providers: [
                { provide: OrangeApi, useFactory: orangeApiStub },
                { provide: CurrentDataService, useFactory: CurrentDataServiceStub }
            ]
        })
            .compileComponents();

        fixture = TestBed.createComponent(EscaparateBannerComponent);
        component = fixture.componentInstance;
        component.moduleData = require('../../testing/moduleData.json');
        fixture.detectChanges();
    }));

    //DONE
    it('getBannerModuleData', () => {

        expect(component).toBeTruthy();

        spyOn(component, 'getBannerModuleData').and.callThrough();
        component.getBannerModuleData();
        expect(component.getBannerModuleData).toHaveBeenCalled();
    });

    //DONE
    it('searchBanner', () => {

        spyOn(component, 'searchBanner').and.callThrough();
        component.getBannerModuleData();
        expect(component.searchBanner).toHaveBeenCalled();


    });
});

Una recomendacion aparte es probar si los test que necesitas correr realmente necesitan un beforeEach en la incializacion del componente, puede que no sea necesario correrlos cada vez asi que puede que baste tan solo con un beforeAll, esto te puede mejorar la velocidad de ejecucion.

1
  • He probado a implementarlo, y ahora sale el siguiente error:import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing'; import { OrangeApi } from '@orange/redux'; import { EscaparateBannerComponent } from './escaparate-banner.component'; import { Observable } from 'rxjs/Observable'; import { CurrentDataService } from '../../services/current-data.service'; Commented el 4 may. 2021 a las 21:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.