🐞 bug report

Is this a regression?

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

Description

🔬 Minimal Reproduction

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"

Dec 22 '21 21:12 RogierKonings

I can reproduce this. The generated package looks different:

.
├── 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

Jan 03 '22 07:01 manuelmeister

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.

Jan 14 '22 14:01 kievsash

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

Jan 28 '22 01:01 JosephBarkate

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"]
}

Feb 03 '22 18:02 guilhermetod

For reference: ngrx/platform#3248

Feb 03 '22 22:02 guilhermetod

@guilhermetod Thank you for explanation

Mar 28 '22 16:03 NepipenkoIgor

@NepipenkoIgor

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

Jun 06 '22 15:06 kevinmallinsonflynn

Same error here! :cry:

Jun 15 '22 13:06 thayna-oliveira

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

Sep 11 '22 12:09 NepipenkoIgor

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

Feb 06 '23 17:02 e4nie