Jest tests fail: Cannot use import statement outside a module

[ThePuscher]

Bug Description

I am working with an angular project that uses jest for unit tests instead of karma. When trying to run the tests, the following error occurs:

Details:

    [...]/node_modules/@ui5/webcomponents/dist/Toast.js:7
    import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      10 | import { ActivatedRoute, Router } from '@angular/router';
    > 12 | import { ToastComponent } from '@ui5/webcomponents-ngx/main/toast';
         | ^
      13 | import { CardComponent } from '@ui5/webcomponents-ngx/main/card';
      14 | import { PopoverComponent } from '@ui5/webcomponents-ngx/main/popover';
      15 | import {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (node_modules/@ui5/webcomponents-ngx/fesm2022/ui5-webcomponents-ngx-main-toast.mjs:5:8)
      at Object.<anonymous> (src/app/x/x.component.ts:12:1)
      at Object.<anonymous> (src/app/x/x.component.spec.ts:3:1)

It seems like jest would expect commonJS syntax here.

Steps to Reproduce

Run jest on an angular component that imports a component from webcomponents-ngx in the context given below.

Context

• UI5 Web Components Version: 1.22.0
• UI5 Web Components for Angular Version: 0.2.3
• Angular Version: 16.2.12
• jest Version: 29.7.0
• jest-preset-angular Version: 14.0.0
• ts-node Version: 10.9.2
• typescript Version: 4.9.4

jest.config.ts:

import type { Config } from 'jest';

const config: Config = {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: './coverage',
  moduleDirectories: ['node_modules', '<rootDir>'],
  preset: 'jest-preset-angular',
  rootDir: './',
  roots: ['<rootDir>'],
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  testEnvironment: 'jsdom',
};

export default config;

setup-jest.ts:

import 'jest-preset-angular/setup-jest';
import 'jest-canvas-mock';

From tsconfig.json:

"compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "lib": ["ES2022", "dom"],
    // ...
}

Priority

• [ ] Low
• [ ] Medium
• [ ] High
• [X] Very High

Stakeholder Info (if applicable)

• Organization: SAP
• Business impact: Low

[github-actions[bot]]

Hello @ThePuscher, thank you for using ui5-webcomponents-ngx! The ui5-webcomponents-ngx team will triage your issue as soon as possible.