pietro99
pietro99

Reputation: 21

spec files keeps failing, the error says "Cannot configure the test module when the test module has already been instantiated."

i'm writing some test for all the components and services of a project not writen by me. I wrote 160 tests and just 20 of them returns success, i do not understand the differences between the test that fails and the ones thet don't fails, i'm pretty sure that the ones that fails should not, becouse the webapp works propertly. all the failing tests returns the same error(that makes me think i have some wrong config), the error is:

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

i know that's not the first question abotu this error, but the solutions i found online does not helps me out.

here is the spec file of a very very simple service:

import { TestBed } from '@angular/core/testing';

import { XService } from './X.service';

describe('XService', () => {
  let service: XService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(XService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

(i have spec files way more complex than this, and some of them are asyncronous, and like this one, they fails with the error on top)

here is a .spec of a minimal component:

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { XComponent } from './X.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ XComponent ]
    })
    .compileComponents();
  });

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

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

my test.ts:

import 'zone.js/dist/zone-testing'

import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: {
  context(path: string, deep?: boolean, filter?: RegExp): {
    keys(): string[];
    <T>(id: string): T;
  };
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.

const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

COMPLETE LOG OF THE ERROR:

Chrome Headless 99.0.4844.51 (Windows 10) MenuComponent should create FAILED 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 (node_modules/@angular/core/ivy_ngcc/fesm2015/testing.js:1757:1) at TestBedRender3.configureTestingModule (node_modules/@angular/core/ivy_ngcc/fesm2015/testing.js:1663:1) at Function.configureTestingModule (node_modules/@angular/core/ivy_ngcc/fesm2015/testing.js:1553:1) at UserContext. (projects/lazio/src/app/components/menu/menu.component.spec.ts:22:11) at Generator.next () at asyncGeneratorStep (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1) at _next (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:25:1) at node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:32:1 at new ZoneAwarePromise (node_modules/zone.js/fesm2015/zone.js:1387:1) at UserContext. (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:21:1) NullInjectorError: R3InjectorError(DynamicTestModule)[UtilService -> TranslateService -> TranslateService]: NullInjectorError: No provider for TranslateService! error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'UtilService', 'TranslateService', 'TranslateService' ] }) NullInjectorError: R3InjectorError(DynamicTestModule)[UtilService -> TranslateService -> TranslateService]: NullInjectorError: No provider for TranslateService! at NullInjector.get (node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:11081:1) at R3Injector.get (node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:11247:1) at R3Injector.get (node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:11247:1) at injectInjectorOnly (node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:4728:1) at ɵɵinject (node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:4732:1) at Object.UtilService_Factory [as factory] (ng:///UtilService/ɵfac.js:4:39) at R3Injector.hydrate (node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:11416:1) at R3Injector.get (node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:11236:1) at NgModuleRef$1.get (node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:25341:1) at Object.get (node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:25055:1) TypeError: Cannot read properties of undefined (reading 'menu') at UserContext. (projects/lazio/src/app/components/menu/menu.component.spec.ts:43:32) at ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1) at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:301:43) at ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:371:1) at Zone.run (node_modules/zone.js/fesm2015/zone.js:134:1) at runInTestZone (node_modules/zone.js/dist/zone-testing.js:581:38) at UserContext. (node_modules/zone.js/dist/zone-testing.js:596:24) at Error: Expected undefined to be truthy. at at UserContext. (projects/lazio/src/app/components/menu/menu.component.spec.ts:47:23) at ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1) at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:301:43)

thank you in advance for your help

Upvotes: 0

Views: 1779

Answers (2)

Le Duy Nhac
Le Duy Nhac

Reputation: 1

I got the same issues like you when "npm run test" with lots of spec files. Then I ope the console tab of Karma's browser and found that there were errors and fixed them. As a result, no error on the top any more.

Upvotes: 0

AliF50
AliF50

Reputation: 18859

Try adding providers to the first configureTestingModule.

import { TestBed } from '@angular/core/testing';

import { XService } from './X.service';

describe('XService', () => {
  let service: XService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [XService]
    });
    service = TestBed.inject(XService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

In essence, do not have any empty object configureTestingModules. Also, make sure you await all TestBed.configureTestingModule({...}).compileComponents(); before doing any TestBed.inject.

The above may or may not fix it.

Edit What I would do if I were you is change all describe to xdescribe and remove each x one by one (the x means skip). Once you have a failure, you know that test suite is problematic.

Upvotes: 0

Related Questions