Skip to content

bug: Standalone components not usable in jest #28667

@Squixx

Description

@Squixx

Prerequisites

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/ionicons@7.2.1/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+build-angular@17.0.6
@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+schematics@17.0.6/node_modules/@angular-devkit/schematics)
@angular/cli : 17.0.6 (/node_modules/.pnpm/@angular+cli@17.0.6/node_modules/@angular/cli)
@ionic/angular-toolkit : 9.0.0 (/node_modules/.pnpm/@Ionic+angular-toolkit@9.0.0/node_modules/@ionic/angular-toolkit)

Capacitor:

Capacitor CLI : 5.5.1
@capacitor/core : 5.5.1 (/node_modules/.pnpm/@capacitor+core@5.5.1/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

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions