Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
4 of 6 tasks
tobiloeb opened this issue Jan 18, 2022 · 4 comments · Fixed by #24681
Labels
package: angular @ionic/angular package type: bug a confirmed bug report

Comments

@tobiloeb
Copy link

Prerequisites

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.

@ionitron-bot ionitron-bot bot added the triage label Jan 18, 2022
@liamdebeasi liamdebeasi self-assigned this Jan 25, 2022
@HipyCas
Copy link

HipyCas commented Jan 31, 2022

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
Copy link
Contributor

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

@mayankkataria
Copy link

mayankkataria commented Feb 24, 2022

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.

@ionitron-bot
Copy link

ionitron-bot bot commented Mar 26, 2022

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Mar 26, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: angular @ionic/angular package type: bug a confirmed bug report
Projects
None yet
4 participants