Issue with Setting up Jest in angular 9 with angular-jest-preset

Question

I am currently setting up Jest in angular 9 with jest-preset-angular version 9, the code runs but i am getting the following error:

TypeError: Cannot read property 'ngModule' of null

not sure how to debug.

Here is my jest.config.json

{
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
    "<rootDir>/setup-jest.ts"
],
"transformIgnorePatterns": [
    "node_modules/(?!@ngrx|ngx-socket-io)" 
],
"transform": {
    "^.+\\.(ts|js|html)$": "ts-jest"
},
"testPathIgnorePatterns": [
    "<rootDir>/node_modules/",
    "<rootDir>/dist/",
    "<rootDir>/src/test.ts"
],
"modulePaths": ["<rootDir>"]

}

and the spec file

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { myComponent } from './knowuser.component';

import 'zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/zone-testing';

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

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

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

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

Busybody

plain js service gets executed successfully. its just with components i have the issue – Busybody

which command do you use to run the test file? – Sebastiansebastiano

jest --watch --silent=false then i select specific file to run the test – Busybody

Answer 1

This happened to me and it was because of Circular dependency issue :

Description : A cyclic dependency exists when a dependency of a service directly or indirectly depends on the service itself. For example, if UserService depends on EmployeeService, which also depends on UserService. Angular will have to instantiate EmployeeService to create UserService, which depends on UserService, itself.

Debugging the error : Use the call stack to determine where the cyclical dependency exists. You will be able to see if any child dependencies rely on the original file by mapping out the component, module, or service's dependencies, and identifying the loop causing the problem.

Break this loop (or circle) of dependency to resolve this error. This most commonly means removing or refactoring the dependencies to not be reliant on one another.

Lifeordeath

Answer 2

is it possible you have a extra space or other character between configureTesti and ngModule on line 14 in the spec file?

Gruesome

no that doesn't seem to be the problem, and no there is no extra space. – Busybody