bug: Angular 13 Jest Tests fail while opening overlays: Cannot set property '$lazyInstance$' of undefined (present is not a function)

[tobiloeb]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

The error occurs when an alert or modal will be presented or any other function is called (e.g. onDidDismiss). Everything works fine when testing it in the browser, but if we run a jest test the following error is thrown:

Cannot set property '$lazyInstance$' of undefined
TypeError: Cannot set property '$lazyInstance$' of undefined
    at Object.registerInstance (/Users/.../node_modules/@ionic/core/dist/cjs/index-8138ba57.js:1988:90)
    at new Alert (/Users/.../node_modules/@ionic/core/dist/cjs/overlays-b91eb626.js:432:13)
    at Function.invokeTheCallbackFunction.construct (/Users/.../node_modules/jsdom/lib/jsdom/living/generated/CustomElementConstructor.js:27:30)
    at createElement (/Users/...node_modules/jsdom/lib/jsdom/living/helpers/create-element.js:204:33)
    at DocumentImpl.createElement (/Users/...node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:719:12)
    at Document.createElement (/Users/.../node_modules/jsdom/lib/jsdom/living/generated/Document.js:261:60)
    at /Users/.../node_modules/@ionic/core/dist/cjs/overlays-b91eb626.js:4073:32
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

We dig into this issue and see that some methods are not defined. We can create an alert with alert.create({})
but methods like present, onDidDismiss are not defined.

Expected Behavior

The modals or alerts can be used in jest test like in the browser. We can't reproduce this issue with ionic 5.

Steps to Reproduce

We have setup a very plain Angular 13 project with the angular cli. We added our Jest configuration to run the unit tests with Jest and added @ionic/angular 6.0.2

Everything is working fine except for alert.create().then(alert => alert.present())

Code Reproduction URL

https://github.com/tobiloeb/ionic6-jest-issue

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v14.16.1
npm : 6.14.12
OS : macOS Big Sur

Additional Information

First we thought it is a jest problem, but everything is working fin except for the ionic overlays. And we found a very similar issue for ionic/vue: #24503
In our case we already import the AlertController from '@ionic/angular' and not from core.

[HipyCas]

The same problem happens to me using Vue and the Modal component. I have tested it in browser environment, both Firefox and Chrome. In Firefox, this is the error message (an extract of it):

Uncaught TypeError: t is undefined
    registerInstance index-06cd27b1.js:4
    t overlays-942c6b99.js:4
    createOverlay overlays-942c6b99.js:4
    promise callback*createOverlay overlays-942c6b99.js:4
    create overlays-942c6b99.js:4
    modifyId Settings.vue:99
    patchStopImmediatePropagation runtime-dom.esm-bundler.js:371
    callWithErrorHandling runtime-core.esm-bundler.js:6708
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:6717
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:6727
    invoker runtime-dom.esm-bundler.js:357
    addEventListener runtime-dom.esm-bundler.js:307
    patchEvent runtime-dom.esm-bundler.js:325
    patchProp runtime-dom.esm-bundler.js:389
    mountElement runtime-core.esm-bundler.js:3809
    processElement runtime-core.esm-bundler.js:3772
    patch runtime-core.esm-bundler.js:3692

And in chrome instead I get:

index-06cd27b1.js?9160:4 Uncaught TypeError: Cannot set properties of undefined (setting '$lazyInstance$')
    at registerInstance (index-06cd27b1.js?9160:4:1)
    at new t (overlays-942c6b99.js?ced9:4:1)
    at eval (overlays-942c6b99.js?ced9:4:1)
    at async modifyId (Settings.vue?2d8d:99:1)

[liamdebeasi]

Thanks for the issue. This has been resolved via #24681, and a fix will be available in an upcoming release of Ionic Framework.

[mayankkataria]

Hey @liamdebeasi I'm also facing this issue. Can you please tell me how can I update my files with your commit? Or if it's available in latest release of Ionic than what should I do to update my current versions.