Using JEST to run Angular component test gives cannot find module

Question

Using Jest for the first time. Used the following code to initialze a component testing:

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [ CreateQuoteComponent ]
    });
    fixture = TestBed.createComponent(CreateQuoteComponent);
    component = fixture.componentInstance;
  }));

  test('should exist', () => {
    expect(component).toBeDefined();
  });
});

When running, for some of the imports in the component gives

Test suite failed to run Cannot find module' with ' 
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
      at Object.<anonymous> (src/app/modules/xxx/components/landing/create/create.component.ts:19:1)

any leads for this or is there known workaround?

Juliyanage Silva · Accepted Answer · 2021-07-06 14:50:19Z

18

I figured the issue out. Seems JEST cannot resolve relative paths that we configure inside the app like '@' signs so we need to provide the jest moduleNameMapper like below:

"jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/jest.ts",
    "moduleNameMapper": {
      "@oshc(.*)": "<rootDir>/src/app/modules/oshc/$1",
      "@shared(.*)": "<rootDir>/src/app/@shared/$1"
    }

},

UPDATE : There will be another problem of JEST cannot find modules inside node_modules of your root folder. For this add the follwoing to jest configuration for module directories : "moduleDirectories": [ "node_modules", "src" ]

edited Jul 6, 2021 at 14:50

answered Jan 13, 2020 at 15:51

Juliyanage Silva

2,7193 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Julio Cesar Brito Gomes · Accepted Answer · 2023-01-30 15:16:47Z

7

In my case I changed the absolute path to the relative path and it worked. The change must be made in both component.ts and spec.ts files

For example, use this import:

import { GenericService } from '../../../shared/services/generic.service';

Instead of:

import { GenericService } from 'src/app/shared/services/generic.service';

edited Jan 30, 2023 at 15:16

answered Jan 30, 2023 at 14:43

Julio Cesar Brito Gomes

87010 silver badges14 bronze badges

1 Comment

Andrew Over a year ago

I confirm that worked also for me. But the question is why? However, I would like to use absolute paths

Collectives™ on Stack Overflow

Using JEST to run Angular component test gives cannot find module

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related