bug: jest + babel tests fail in Ionic 6

[milang]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x

Current Behavior

I wrote a simple test that uses Jest, Babel and Ionic 5 (latest as of November 19, 2021, version 5.9.1): https://github.com/milang/ionic-simplevitejs/blob/jest-ionic5/src/App.test.tsx

This test works without issues:

However, after upgrading to Ionic 6 (and strictly controlling the changes -- not touching anything else, i.e. with identical Jest, Jest-settings, Babel, Babel-settings, test itself), Jest suddenly starts failing with the following error: https://github.com/milang/ionic-simplevitejs/tree/jest-ionic6

I tried different recommended approaches for getting ESM modules working with Jest, but all failed (and there is also the question of why does the current Jest/Babel configuration work fine with Ionic 5 package).

Expected Behavior

The test should continue working after upgrading to Ionic 6, or there should at least be guidance for how should Jest/Babel configuration be updated to continue running tests with Ionic 6.

Steps to Reproduce

Working version is in the jest-ionic5 branch:

cd /work/directory
git clone https://github.com/milang/ionic-simplevitejs.git
git checkout jest-ionic5
yarn && yarn run test # => success

Non-working, Ionic 6 (RC3) version is in the jest-ionic6 branch. This branch adds a single commit that only changes Ionic version in package.json (plus related lock-file and README changes), nothing else:

git checkout jest-ionic6
yarn && yarn run test # => failure

Code Reproduction URL

https://github.com/milang/ionic-simplevitejs/tree/jest-ionic6

Ionic Info

No response

Additional Information

No response

[liamdebeasi]

Thanks! This is a limitation in Jest with ES Modules. We will be noting this in the Ionic 6 migration guide, but for now please see https://github.com/ionic-team/ionic-framework/issues/24026#issuecomment-963243616 for how you can get setup with this change now in your app.

[milang]

@liamdebeasi thank you for the link, however the test still fails after I add transformIgnorePatterns to jest configuration section in package.json. Can you reproduce the failure by using my repository? (latest commit on jest-ionic6 contains the transformIgnorePatterns addition)

cd /work/directory
git clone https://github.com/milang/ionic-simplevitejs.git
cd ionic-simplevitejs
git checkout jest-ionic6
yarn && yarn test

I assume you got it working in your examples, so there must be a setting that I am missing. Any idea what it is (it is not just transformIgnorePatterns)? This is getting to be an extremely frustrating experience.

[milang]

@liamdebeasi @sean-perkins

This is a limitation in Jest with ES Modules. We will be noting this in the Ionic 6 migration guide, …

I found the missing settings that were causing the simple Jest test to fail with Ionic 6. You might want to consider expanding your "Ionic 6 migration guide" with extra notes to improve developers' migration experience.

I captured all the changes that were required to move to a successful Ionic 6 Jest test in the following commit: https://github.com/milang/ionic-simplevitejs/commit/a817e748ec553760115533ab577c338cd2e92aca

There were three parts (I was missing no. 2 & 3):

1. Add jest/transformIgnorePatterns to package.json as per your recommendation
2. (When using Babel) Make sure Babel preset @babel/preset-env is included in project-wide configuration, not file-relative configuration; this is a relatively new distinction introduced in Babel 7
   • i.e. define root Babel configuration in <project-root>/babel.config.json, not <project-root>/.babelrc.json or <project-root>/package.json
3. (When using Babel) Make sure browserslist/test is set to current node in <project-root>/package.json
   • This allows @babel/preset-env to skip polyfill injection via core-js and regenerator-runtime, as far as I can determine

[liamdebeasi]

Ah thank you! I will be sure to mention this.

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