[Bug]: Cannot find module '@ngrx/store/testing'

[alorle]

Version

11.0.0

Steps to reproduce

1. Create new project with Angular CLI v13.
2. Add jest-preset-angular to project as described in https://thymikee.github.io/jest-preset-angular/docs/getting-started/installation.
3. Add @ngrx/store to project, running npx ng add @ngrx/store@latest.
4. Import anything from @ngrx/store/testing in a test file (src/app/app.component.spec.ts for example).
5. Run npx jest.

Expected behavior

jest-preset-angular should resolve things from @ngrx/store/testing.

Actual behavior

Running tests with npx jest will throw an error:

 FAIL  src/app/app.component.spec.ts
  ● Test suite failed to run

    Cannot find module '@ngrx/store/testing' from 'src/app/app.component.spec.ts'

      1 | import { TestBed } from '@angular/core/testing';
      2 | import { AppComponent } from './app.component';
    > 3 | import { provideMockStore } from "@ngrx/store/testing";
        | ^
      4 |
      5 | describe('AppComponent', () => {
      6 |   beforeEach(async () => {

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (src/app/app.component.spec.ts:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.118 s
Ran all test suites.

Additional context

I have followed this guide to try to fix the problem: https://thymikee.github.io/jest-preset-angular/docs/guides/angular-13+#cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages. However, I have not been lucky 😓

@ngrx/store/testing is provided by @ngrx/store, as you can see in their code: https://github.com/ngrx/platform/tree/master/modules/store

Environment

System:
  OS: Linux 5.15 undefined
  CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
Binaries:
  Node: 12.22.7 - ~/.nvm/versions/node/v12.22.7/bin/node
  Yarn: 1.22.17 - /usr/bin/yarn
  npm: 6.14.15 - ~/.nvm/versions/node/v12.22.7/bin/npm
npmPackages:
  jest: ^27.3.1 => 27.3.1

[cedricduffournet]

I think this can help: #1147 (comment)

[ahnpnl]

You need to provide moduleNameMapper to tell Jest where to load @ngrx/store/testing as mentioned by @cedricduffournet :) We did mention in the doc about that too if the default resolver doesn't help.

[alorle]

I think this can help: #1147 (comment)

As in the example, adding those lines into jest.config.js will thorw following error:

 FAIL  src/app/app.component.spec.ts
  AppComponent
    ✕ should create the app (15 ms)
    ✕ should have as title 'jest-preset' (9 ms)
    ✕ should render title (4 ms)

  ● AppComponent › should create the app

    Unexpected value 'undefined' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

      16 |
      17 |   it('should create the app', () => {
    > 18 |     const fixture = TestBed.createComponent(AppComponent);
         |                             ^
      19 |     const app = fixture.componentInstance;
      20 |     expect(app).toBeTruthy();
      21 |   });

      at verifySemanticsOfNgModuleDef (node_modules/@angular/core/fesm2015/core.mjs:24165:19)
          at Array.forEach (<anonymous>)
      at src/app/app.component.spec.ts:18:29

  ● AppComponent › should have as title 'jest-preset'

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

       5 | describe('AppComponent', () => {
       6 |   beforeEach(async () => {
    >  7 |     await TestBed.configureTestingModule({
         |                   ^
       8 |       declarations: [
       9 |         AppComponent
      10 |       ],

      at TestBedRender3.assertNotInstantiated (node_modules/@angular/core/fesm2015/testing.mjs:1785:19)
      at src/app/app.component.spec.ts:7:19
      at src/app/app.component.spec.ts:6:25

  ● AppComponent › should render title

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

       5 | describe('AppComponent', () => {
       6 |   beforeEach(async () => {
    >  7 |     await TestBed.configureTestingModule({
         |                   ^
       8 |       declarations: [
       9 |         AppComponent
      10 |       ],

      at TestBedRender3.assertNotInstantiated (node_modules/@angular/core/fesm2015/testing.mjs:1785:19)
      at src/app/app.component.spec.ts:7:19
      at src/app/app.component.spec.ts:6:25

Test Suites: 1 failed, 1 total
Tests:       3 failed, 3 total
Snapshots:   0 total
Time:        1.514 s, estimated 2 s
Ran all test suites.

You need to provide moduleNameMapper to tell Jest where to load @ngrx/store/testing as mentioned by @cedricduffournet :) We did mention in the doc about that too if the default resolver doesn't help.

As I have commented, I have seen the comments and guides for the update to Angular v13. I do not think it is as trivial as you say, since several of us have had the same problem and there does not seem to be a clear solution.

[ahnpnl]

The problem is that the preset doesn’t have control over Jest module resolution. The error is typical Jest error which is related to Angular 13 ESM packages. Preset is preset and users are encouraged to customize any config options if the preset config is not working. The preset we provide here works with standard angular projects without external deps.

The next error is related to ngrx bug ngrx/platform#3243 . Since you are using ngrx and the error is related to it, I recommend to check there.

@alorle please check upstream bug which I created for @ngrx/store which is at ngrx/platform#3248. It is the root cause of the error "Cannot find module ..."

[DerFnoeh]

@alorle I got the same errors after modifying jest.config.js then this workaround worked for me:

Setup your setup.jest.ts like this to disable the new destroyAfterEach default activation in Angular 13:

import 'jest-preset-angular/setup-jest';
import 'jest-canvas-mock';
import { TestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// https://github.com/ngrx/platform/issues/3243
// Teardown-Options can probably be removed when https://github.com/ngrx/platform/pull/3245 is closed and we update @ngrx/store.
beforeAll(() => {
  TestBed.resetTestEnvironment();
  TestBed.initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting(),
    { teardown: { destroyAfterEach: false } } // 👈
  );
});