bug: ionic-react-test-utils not compatible with vitest

[SimonGolms]

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

• v6.x

Current Behavior

Unit Tests with vitest fail due to the following issue:

 FAIL  src/components/Header.test.tsx [ src/components/Header.test.tsx ]
SyntaxError: Unexpected token 'export'
 ❯ Object.compileFunction https:/ionic-react-vitest-example.w.staticblitz.com/blitz.bbb482e7415e406cfc62838751ca694c1dc24cf6.js:6:341311
 ❯ wrapSafe https:/ionic-react-vitest-example.w.staticblitz.com/blitz.bbb482e7415e406cfc62838751ca694c1dc24cf6.js:6:218270
 ❯ Module._compile https:/ionic-react-vitest-example.w.staticblitz.com/blitz.bbb482e7415e406cfc62838751ca694c1dc24cf6.js:6:218638
 ❯ Module._extensions..js https:/ionic-react-vitest-example.w.staticblitz.com/blitz.bbb482e7415e406cfc62838751ca694c1dc24cf6.js:6:219666
 ❯ Module.load https:/ionic-react-vitest-example.w.staticblitz.com/blitz.bbb482e7415e406cfc62838751ca694c1dc24cf6.js:6:217692
 ❯ Module._load https:/ionic-react-vitest-example.w.staticblitz.com/blitz.bbb482e7415e406cfc62838751ca694c1dc24cf6.js:6:215263

Module /home/projects/ionic-react-vitest-example/node_modules/@ionic/core/components/index.js:4 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@ionic/core" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    deps: {
      inline: [
        "@ionic/core"
      ]
    }
  }
}

Expected Behavior

Expect @ionic/react-test-utils to be compatible with vitest

Steps to Reproduce

Following the Stackblitz example:

1. Wait until web container is initialized and tests are successful run
2. Open the test/setup.ts file and switch the comments block to use mockIonicReact
3. Rerun tests with npm run test or npm run test:ui -> Tests failing
4. Recommended workaround with deps: { inline: ["@ionic/core"] } remains broken

Code Reproduction URL

https://stackblitz.com/edit/ionic-react-vitest-example?file=src%2Ftest%2Fsetup.ts&initialPath=__vitest__

Additional Information

Could be related to the use of CommonJS and ES Module, which is already described in this ticket: ionic-team/ionic-framework#25104

[liamdebeasi]

Hey there,

I have a dev build with a proposed fix for Ionic React:

npm install @ionic/react@6.2.9-dev.11664471667.111b2cca @ionic/react-router@6.2.9-dev.11664471667.111b2cca

Please note that this is a build of Ionic 7 (we are considering this a breaking change to minimize disruptions to developer workflows). As a result, this dev build is subject to the Ionic 7 Breaking Changes.

[liamdebeasi]

Hey there,

I merged a fix for this in ionic-team/ionic-framework#26044. A fix will be available in an upcoming major release of Ionic Framework. I am going to close this, but let me know if you run into any issues with the dev build. Thanks!