Angular Test Cannot read property 'ngModule' of null

Question

I'm trying to use a simple test on Angular, here is the content of the test :

import { ComponentFixture } from '@angular/core/testing';
import { TestBed } from '@angular/core/testing';
import { By } from "@angular/platform-browser"
import { TestComponentComponent } from './test-component.component';

fdescribe('TestComponentComponent', () => {
  let component: TestComponentComponent;
  let fixture: ComponentFixture<TestComponentComponent>;

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

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

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

  it('should show no data', () => {
    fixture.detectChanges();
    const noDataDiv = fixture.debugElement.query(By.css('#noData'));
    expect(noDataDiv.nativeElement.textContent).toEqual('No Data');
  });
});

i run the test by this command :

ng test --main .\src\app\test-component\test-component.component.spec.ts

and i got this error :

TypeError: Cannot read property 'ngModule' of null

is there any change between the version ?

i'm using the latest version of angular and the test file has been generated with command ng generate component

i've just add the 'f' behind the describe and the latest 'it'

Answer 1

You don't need the --main parameter, you can just run the file with include:

ng test --include src/app/test-component/test-component.component.spec.ts

Include also has glob support, which you can use to run tests in a folder:

ng test --include src/**/*.spec.ts

What is the --main parameter for?

It is used to define the entrypoint of the Angular app for Karma. This is important because Angular needs to boot up a in testing mode, so that e.g. Modules and Components can be created.

If you look at the angular.json in your project, you will see something like this:

        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts"
            ...
          }
        }

The main identifier is linked to the file src/test.ts, which initializes the test environment:

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

So one use case for --main would be to have different entrypoint files for different kinds of tests that require special configuration for the testing environment.