[Bug]: [ng13] - Cannot find module '@angular/common/locales/xxx'

[shajz]

Version

11.0.0-rc2

Steps to reproduce

1. Clone my repo at https://github.com/shajz/ng13-jest-locale-import-bug
2. npm ci
3. npm test

Expected behavior

I expect locales to be registered correctly from test files

Actual behavior

$ npm test

> ng13-jest-locale-import-bug@0.0.0 test
> node --expose-gc ./node_modules/jest/bin/jest.js --no-cache --logHeapUsage

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

    Cannot find module '@angular/common/locales/fr' from 'src/app/app.component.spec.ts'

      1 | import { registerLocaleData } from '@angular/common';
    > 2 | import localeFr from '@angular/common/locales/fr';
        | ^
      3 | import { TestBed } from '@angular/core/testing';
      4 | import { AppComponent } from './app.component';
      5 | registerLocaleData(localeFr);

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

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

Additional context

Upgraded to Angular 13, followed instructions for jest-preset-angular@11 (using specified resolver, transformIgnorePatterns, transform; was using preset: jest-preset-angular before)

Environment

System:
  OS: Windows 10 10.0.19043
  CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
Binaries:
  Node: 14.18.0 - ~\AppData\Local\Volta\tools\image\node\14.18.0\node.EXE
  Yarn: 1.22.15 - C:\Program Files\Volta\yarn.EXE
  npm: 7.20.6 - ~\AppData\Local\Volta\tools\image\npm\7.20.6\bin\npm.CMD
npmPackages:
  jest: ^27.3.1 => 27.3.1

[ahnpnl]

Our default resolver won't solve all cases I believe. You would need to use moduleNameMapper to fix the issue or extend the default resolver.

@alan-agius4 do you have any other suggestions?

[alan-agius4]

@ahnpnl, let me get back to you on this tomorrow.

[shajz]

Should have added this test is working fine on ng@12 / jest-preset-angular@9, with this jest.config.js as such :

require('jest-preset-angular/ngcc-jest-processor');
module.exports = {
  preset: 'jest-preset-angular',
  // ...
}

I only changed to these suggested properties while troubleshooting but I don't think it makes a difference.
Side note, i had to add testEnvironment: "jsdom", cause I'm doing document manipulations for other reasons in my setupJest.ts, this is unrelated to the problem at hand

module.exports = {
  resolver: "jest-preset-angular/build/resolvers/ng-jest-resolver.js",
  transformIgnorePatterns: ["node_modules/(?!@angular)"],
  transform: {
    "^.+\\.(ts|js|mjs|html|svg)$": "jest-preset-angular",
  },
  testEnvironment: "jsdom",
  // ...
}

[ahnpnl]

The workaround for your problem is

// jest.config.js
module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ["<rootDir>/setupJest.ts"],
  moduleNameMapper: {
    '@angular/common/locales/(.*)$': '<rootDir>/node_modules/@angular/common/locales/$1.mjs'
  }
};

Angular 13 ships Angular packages with ESM format, which is not the same as Angular 12. The guide in documentation might need to update though :) We did add a resolver but it won't work for all cases. In this case, deep import in @angular/common/locales is the exceptional case.

[shajz]

Thanks @ahnpnl, this solves my issue !
Yeah I think it could be added to the docs, I don't know how frequent it is to import locales in tests but anyone doing that will certainly come here for guidance 😅

[ahnpnl]

Thanks for the suggestion. I will add it to the documentation.

In the meantime, I would like to wait to see if Angular team has any other suggestions since this is related to Angular 13 specific package format.

[alan-agius4]

I did take a look at this and it appears that the problem is that moduleFileExtensions doesn't include mjs. This means that this extensions needs to be added manually.

@ahnpnl, this should be added in the preset

jest-preset-angular/presets/index.js

Line 12 in 1e7dbf8

moduleFileExtensions: ['ts', 'html', 'js', 'json'],

@shajz, since you are not using the preset recommended settings via preset: 'jest-preset-angular, you will need to add moduleFileExtensions in your jest config.

module.exports = {
   resolver: "jest-preset-angular/build/resolvers/ng-jest-resolver.js",
   transformIgnorePatterns: ["node_modules/(?!@angular)"],
+  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
-  moduleFileExtensions: ['ts', 'html', 'js', 'json'],

[ahnpnl]

Thanks a lot @alan-agius4!!! I will add it.

[shajz]

Thanks @alan-agius4 and @ahnpnl, just tested out rc3 while reverting to preset: jest-preset-angular, working great :)

[devfservant]

I face a similar error when trying to use @ngrx/store/testing:

Cannot find module '@ngrx/store/testing' from 'src/app/store/modules/foo/foo.effects.spec.ts'
    > 3 | import { MockStore, provideMockStore } from '@ngrx/store/testing';

I read the guide about this issue with deep path imports and checked your workaround as well,
but unlike @angular/common/locales/foo, I do not see any .mjs file in the bundle.

Therefore, I am a bit lost on how to fix this problem.
My other tests (the ones which do not require @ngrx/store/testing) pass.
It was working super fine before doing all the upgrades for Angular 13.

[cedricduffournet]

I manage to make it work by adding this in jest config file:

  moduleNameMapper: {
    "@ngrx/store/testing":
      "<rootDir>/node_modules/@ngrx/store/fesm2015/ngrx-store-testing.mjs",
    "@ngrx/effects/testing":
      "<rootDir>/node_modules/@ngrx/effects/fesm2015/ngrx-effects-testing.mjs",
  },

you can find an example in this repo https://github.com/cedricduffournet/test-ngrx-error

[devfservant]

Thanks @cedricduffournet, it works perfectly!