Skip to content

bug: Standalone components not usable in jest #28667

Closed as not planned
Closed as not planned
@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/[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

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions