bug: "CustomElements not defined" while executing the unit tests.

[anantsharma1310]

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

We were executing our unit tests using Mocha test runner but after importing @ionic/react (version: 5.8.4) in our components, mocha started to throw error before getting to any test case. Everything else is working fine on web and IOS/Android devices, but we are not able to get a workaround for our unit tests. We have debugged ourselves and we like to share our findings. customElements is a method available in a window object. Since we are using a jsdom, we do get window.customElements in our test cases. However, in ionic code, we found that there was a piece of code which is accessing customElements method using window in if condition and inside if block, it is using this reference to access customElements method which will definitely throw an error since this is not equal to window in the test runner env.
Attaching the buggy code, we can also post a PR for the fix if it's too much work but if possible, please expedite it.

Thank you

if (typeof window !== 'undefined' && window.customElements) {
    const element = customElements.get('ion-tabs'); // should be window.customElements
    if (!element) {
        customElements.define('ion-tabs', IonTabsElement); / should be window.customElements
    }
}

Expected Behavior

Should execute in test env as well.

Steps to Reproduce

You can use any test runner to run any dummy test case, it should throw an error right if you are testing component has imported @ionic/react.

Code Reproduction URL

No response

Ionic Info

@ionic/react": 5.8.4
jsdom: 16.6.0
mocha: 8.4.0

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[anantsharma1310]

Submitted the pull request for the fix. Please take a look, these are the small changes but unblock us big time.

#24156

Let us know if we still need to provide the code reproduction url.

[liamdebeasi]

Hi there,

Yes, we still need a code reproduction so we can verify the fix. Can you please send over a GitHub repo?

[anantsharma1310]

Hey

I appreciate your prompt response.
I have created a sample repo on Github with instructions to replicate the issue.

https://github.com/anantsharma1310/ionic-react-unit-test

Do let us know if you guys need something else.

Thank you

[liamdebeasi]

Can you double check your repo? I get the following error when running npm test:

SyntaxError: /Users/liamdebeasi/Ionic/ionic-react-unit-test/src/App.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (16:29):

  14 | describe("Testing <App/> Component", () => {
  15 |    it("App renders a message", () => {
> 16 |       const wrapper = mount(<App />);
     |                             ^
  17 |       expect(wrapper.find('p[data-testid="message"]')).to.be.exist;
  18 |    });
  19 | });

[rish-dario]

Hey I appreciate your prompt response. I have made some changes on the repo please take the latest pull and follow the same steps again. https://github.com/anantsharma1310/ionic-react-unit-test Do let us know if you guys need something else. Thankyou

________________________________ From: Liam DeBeasi ***@***.***> Sent: Tuesday, November 16, 2021 4:17 AM To: ionic-team/ionic-framework ***@***.***> Cc: Rishabh Kumar Srivastava ***@***.***>; Manual ***@***.***> Subject: Re: [ionic-team/ionic-framework] bug: "CustomElements not defined" while executing the unit tests. (Issue #24149) Can you double check your repo? I get the following error when running npm test: SyntaxError: /Users/liamdebeasi/Ionic/ionic-react-unit-test/src/App.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (16:29): 14 | describe("Testing <App/> Component", () => { 15 | it("App renders a message", () => {

16 | const wrapper = mount(<App />);

| ^ 17 | expect(wrapper.find('p[data-testid="message"]')).to.be.exist; 18 | }); 19 | }); — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#24149 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AS3K7SMO5VWT6R6TQX2TCFLUMGEYXANCNFSM5HGJCAWQ>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[liamdebeasi]

Thanks! I can reproduce this behavior. This indeed looks like a bug.

[liamdebeasi]

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

[ionitron-bot]

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.