bug: Jest 'Unexpected token export' when using Ionic Components

[leo-petrucci]

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

I've created a component that uses @ionic/react components and . The component works great, no issues in-app at all.

Unfortunately if I try to add tests with jest and react-testing-library, I start getting errors from @stencil and @ionic/react.

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/leonardo/Staffscanner.Web/www/node_modules/@ionic/core/components/index.js:4
    export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/@ionic/react/dist/index.js:6:20)

This seems to be similar to #15695, but the solutions mentioned there aren't working.

Expected Behavior

Ideally the test suite should run, so I can test my components logic.

Steps to Reproduce

I tried recreating the issue in a Codesandbox, but I cannot get Codesandbox to play nicely with Ionic Components.

Either way you can find the code here.

In my App, as soon as I try to render <IonPage> or <IonContent>, my tests fail. I've seen this error before, it's usually caused by missing mocks, but I can't find any information about what I could possibly need to mock in order to resolve it.

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[Th2mas]

Same for me, any test fails because of the exact same error. Can anybody please review it? I have just started developing a new app from scratch and I can't believe that a simple test is already failing because of such an issue.
Deleting node_modules, upgrading to npm v8.3.0 and installing all modules again did not help.

[Th2mas]

@creativiii I think I have solved the issue, at least on my machine.
For some reason when executing the tests within the terminal or with my IDE, it didn't accept the "--transformIgnorePatterns" flag.
I think it didn't like the normal apostrophe before and after the patterns.
Can you try executing this in your terminal?

react-scripts test --transformIgnorePatterns "node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)"

When I changed ' to " (and upgraded to node v16, npm v8.3.0), it worked again.

[leo-petrucci]

@creativiii I think I have solved the issue, at least on my machine. For some reason when executing the tests within the terminal or with my IDE, it didn't accept the "--transformIgnorePatterns" flag. I think it didn't like the normal apostrophe before and after the patterns. Can you try executing this in your terminal?

react-scripts test --transformIgnorePatterns "node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)"

When I changed ' to " (and upgraded to node v16, npm v8.3.0), it worked again.

I can confirm this works via CLI, but doesn't seem to work via jest.config. I'll keep testing stuff out and report back.

Thank you!

[jwalsh-famkit]

trying this in a custom Jest config app in a Next JS app with Ionic 6 fails to stop issue from showing up during a build:
transformIgnorePatterns: ["node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)"]

running jest --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)' identifies the exclusion set correctly however

[liamdebeasi]

Hi everyone,

This is behavior is due to Jest not supporting ES Module. Our migration guide covers how to use transformIgnorePatterns to avoid this issue: https://ionicframework.com/docs/intro/upgrading-to-ionic-6#testing

Please note that if you are using Create React App, then you are unable to provide this transformIgnorePattern option in your Jest config object. This is a Create React App limitation, not an Ionic one. We recommend passing the transformIgnorePattern directly to the test command.

I am going to close this as this is not a bug in Ionic. For additional help getting setup with Ionic, please post a thread on the Ionic Forum.

[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.