bug: jest + babel tests fail in Ionic 6

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 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]

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

[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