Why Jasmine throws me many errors: Cannot configure the test module when the test module has already been instantiated?

0
votes

I am very confused. Im learning Angular and I was writing unit tests for my service classes, with totally no problem. Today I prepared my first component spec file, and Jasmine gone crazy. When using this code:

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [FooterComponent],
  });
  fixture = TestBed.createComponent(FooterComponent);
  component = fixture.componentInstance;
  span = fixture.nativeElement.querySelector('span');
});

Jasmine throws me an error in my 31 of 146 tests:

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

And all the errors are in tests of service files, no single one for the component test. I am guessing it might to be related somehow with creating instance of the fixture or component. But I have no clue how. When I comment all fixture lines, like below, there is no single error:

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [FooterComponent],
  });
  // fixture = TestBed.createComponent(FooterComponent);
  // component = fixture.componentInstance;
  // span = fixture.nativeElement.querySelector('span');
});

I tried this already, with no effect: https://stackoverflow.com/a/39410211/12603542

Also I was not able to mach similar case in SO questions. Here is an example of my service test file:

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: JwtInterceptor,
          multi: true,
        },
        { provide: AuthService, useValue: authMock },
      ],
    });

    injector = getTestBed();
    httpMock = injector.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify();
  });

And example of complete error:

Error: Cannot configure the test module when the test module has already been instantiated. Make sure you are not using inject before R3TestBed.configureTestingModule. at TestBedRender3.assertNotInstantiated (http://localhost:9876/karma_webpack/node_modules/@angular/core/ivy_ngcc/fesm2015/testing.js:2026:1) at TestBedRender3.configureTestingModule (http://localhost:9876/karma_webpack/node_modules/@angular/core/ivy_ngcc/fesm2015/testing.js:1932:1) at Function.configureTestingModule (http://localhost:9876/karma_webpack/node_modules/@angular/core/ivy_ngcc/fesm2015/testing.js:1822:1) at UserContext. (http://localhost:9876/karma_webpack/src/app/app-core/_helpers/jwt.interceptor.spec.ts:26:13) at ZoneDelegate.invoke (http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-evergreen.js:364:1) at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-testing.js:292:1) at ZoneDelegate.invoke (http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-evergreen.js:363:1) at Zone.run (http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-evergreen.js:123:1) at runInTestZone (http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-testing.js:545:1) at UserContext. (http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-testing.js:560:1)

1
angularunit-testingjasmine

1 Answers

0
votes

The problem was very silly. It was missing describe and compileComponents:

describe('FooterComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [FooterComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
    span = fixture.nativeElement.querySelector('span');
  });
});