bug: Standalone components not usable in jest

[Squixx]

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

v7.x

Current Behavior

When using the ionic angular standalone components, jest will error out on imports within @Stencil

e.g.

/node_modules/.pnpm/[email protected]/node_modules/ionicons/components/ion-icon.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      4 | import { NgModule } from '@angular/core';
      5 | import { ReactiveFormsModule } from '@angular/forms';
    > 6 | import {
        | ^
      7 |   ActionSheetController,
      8 |   IonActionSheet,
      9 |   IonPicker,

Normally (or atleast when not using standalone), you can transformIgnore stencil:

transformIgnorePatterns: ['node_modules/(?!.*.mjs$|@ionic|@angular|@stencil|\\.pnpm/.*(@ionic|@stencil))'],

However with underlying imports this doesnt work (standalone -> component -> stencil)

Now, as components were dynamically loaded this wasnt much of an issue.

However as browser-esbuild cant be supported without using standalone components as said

#28500

this becomes a blocking issue for moving towards esbuild for anyone who uses jest.

Expected Behavior

jest tests can run when using standalone component imports

Steps to Reproduce

I'll add a reproduction url start of next week

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 5.4.16 (/home/coredalae/.npm/npx/864a9e3c2cd0cf50/node_modules/ionic)
Ionic Framework : not installed
@angular-devkit/build-angular : 17.0.6 (/node_modules/.pnpm/@Angular-devkit[email protected]@angular+compiler-cli@17.0.6_@angular+service-worker@17._jfcdvyd4726gg7yc6y7g5hs5zi/node_modules/@angular-devkit/build-angular)
@angular-devkit/schematics : 17.0.6 (/node_modules/.pnpm/@Angular-devkit[email protected]/node_modules/@angular-devkit/schematics)
@angular/cli : 17.0.6 (/node_modules/.pnpm/@angular[email protected]/node_modules/@angular/cli)
@ionic/angular-toolkit : 9.0.0 (/node_modules/.pnpm/@Ionic[email protected]/node_modules/@ionic/angular-toolkit)

Capacitor:

Capacitor CLI : 5.5.1
@capacitor/core : 5.5.1 (/node_modules/.pnpm/@capacitor[email protected]/node_modules/@capacitor/core)

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v20.10.0 (/home/coredalae/.nvm/versions/node/v20.10.0/bin/node)
npm : 10.2.3
OS : Linux 5.15

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. Ionic's standalone components are ES Modules which Jest does not support. The transformIgnorePatterns usage is recommended here to transpile ES Modules to a format that Jest can use.

Adding the following to your Jest config should resolve the issue:

{
  ...,
  "transformIgnorePatterns": ["node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
}

I've added a PR to note this on the Ionic docs: ionic-team/ionic-docs#3298

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