cannot find module 'ngx-mask' when running jest on angular 13

[RogierKonings]

🐞 bug report

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

The bug does not appear in version <=12, where the unit test succeeds but throws a TypeError

Description

A clear and concise description of the problem...

🔬 Minimal Reproduction

https://stackblitz.com/...

Run jest on a unit-test that imports NgxMaskModule.

The test will fail and show a stacktrace

🔥 Exception or Error

    Cannot find module 'ngx-mask' from 'app/my-component.spec.ts'

    > 1 | import { NgxMaskModule } from 'ngx-mask';
        | ^
      2 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
      3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
      4 | import { HttpClientTestingModule } from '@angular/common/http/testing';

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object. (app/my-component.spec.ts:1:1)

🌍 Your Environment

Angular Version:

Angular CLI: 13.1.2
Node: 16.13.0
Package Manager: npm 8.1.0
OS: darwin x64

Angular: 13.1.1
... animations, cdk, common, compiler-cli, core, forms
... language-service, localize, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@angular/compiler               13.0.2
@angular/flex-layout            13.0.0-beta.36
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.4.3

Anything else relevant?

"jest": "27.4.5"

[manuelmeister]

I can reproduce this. The generated package looks different:

Comparison

ngx-mask@12

ngx-mask@13

. ├── LICENSE ├── README.md ├── bundles │   ├── ngx-mask.umd.js │   └── ngx-mask.umd.js.map ├── esm2015 │   ├── index.js │   ├── lib │   │   ├── config.js │   │   ├── custom-keyboard-event.js │   │   ├── mask-applier.service.js │   │   ├── mask.directive.js │   │   ├── mask.pipe.js │   │   ├── mask.service.js │   │   └── ngx-mask.module.js │   └── ngx-mask.js ├── fesm2015 │   ├── ngx-mask.js │   └── ngx-mask.js.map ├── index.d.ts ├── lib │   ├── config.d.ts │   ├── custom-keyboard-event.d.ts │   ├── mask-applier.service.d.ts │   ├── mask.directive.d.ts │   ├── mask.pipe.d.ts │   ├── mask.service.d.ts │   └── ngx-mask.module.d.ts ├── ngx-mask.d.ts ├── ngx-mask.metadata.json └── package.json 5 directories, 26 files

. ├── LICENSE ├── README.md ├── esm2020 │   ├── index.mjs │   ├── lib │   │   ├── config.mjs │   │   ├── custom-keyboard-event.mjs │   │   ├── mask-applier.service.mjs │   │   ├── mask.directive.mjs │   │   ├── mask.pipe.mjs │   │   ├── mask.service.mjs │   │   └── ngx-mask.module.mjs │   └── ngx-mask.mjs ├── fesm2015 │   ├── ngx-mask.mjs │   └── ngx-mask.mjs.map ├── fesm2020 │   ├── ngx-mask.mjs │   └── ngx-mask.mjs.map ├── index.d.ts ├── lib │   ├── config.d.ts │   ├── custom-keyboard-event.d.ts │   ├── mask-applier.service.d.ts │   ├── mask.directive.d.ts │   ├── mask.pipe.d.ts │   ├── mask.service.d.ts │   └── ngx-mask.module.d.ts ├── ngx-mask.d.ts └── package.json 5 directories, 25 files

[kievsash]

I had issue with running jest with ngx-mask ver 13 on Angular 12.1 (I think bc it doesnt contain .js files but .mjs).
Rolling back to ngx-mask 12 solved the issue.

[JosephBarkate]

Seeing the same issue with Angular 13.0.1 and NGX-Mask 13.0.1

[guilhermetod]

The issue is actually the absence of the file indicated in the main field. Angular 13 probably doesn't generate "umd.js" files anymore, so this file doesn't exist.

I'm unsure if this is a problem with this library pointing to that file or if this should be something that jest-preset-angular's resolver should be fixing (since angular's cli knows how to find the correct file and bundle it).

Anyways, workaround for now is to add the following to jest.config.js

moduleNameMapper: {
  // ...
  'ngx-mask': '<rootDir>/node_modules/ngx-mask/fesm2015/ngx-mask.mjs',
},

Or alternatively, this to your tsconfig.spec.json

"paths": {
  "ngx-mask": ["node_modules/ngx-mask/fesm2015/ngx-mask.mjs"]
}

[guilhermetod]

For reference: ngrx/platform#3248

[NepipenkoIgor]

@guilhermetod Thank you for explanation

[kevinmallinsonflynn]

@NepipenkoIgor

This should not be closed IMO as the issue still occurs.

[thayna-oliveira]

Same error here! 😢

[NepipenkoIgor]

Hi @RogierKonings @manuelmeister @kievsash @JosephBarkate @kevinmallinsonflynn @RogierKonings @thayna-oliveira Hi All. Thank you that using ngx-mask package. Yes it was couple mistakes with updating to ng13 . Issues was around paths and build config angular package system . Please try version >=14.2.1 . Everything should works as expected

[e4nie]

It works when you down-grade the version , i install the version 12npm install ngx-mask@12, and it works and resolve the issue.