Jest: SyntaxError: Cannot use import statement outside a module

[philippkolbe]

I'm trying to setup jest in my Next.js typescript app which uses ui5-webcomponents-react.
I followed the Next.js setup for jest and its overall working when I test standard typescript files and when I test tsx components that do not use any ui5-webcomponents.

But for testing components that is using ui5-webcomponent its failing.
When I run npm run test I get:

my_project/node_modules/@ui5/webcomponents-react/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import * as AnalyticalTableHooks from './components/AnalyticalTable/pluginHooks/AnalyticalTableHooks.js';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      12 | import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
      13 |
    > 14 | export default async function PromptDetails(props: { id: string }) {
         |                             ^

Here is my package.json:

{
  "name": "abcdef",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --coverage --forceExit"
  },
  "dependencies": {
    "@types/node": "22.14.1",
    "@types/react": "19.1.1",
    "@types/react-dom": "19.1.2",
    "@ui5/webcomponents": "2.9.0",
    "@ui5/webcomponents-fiori": "2.9.0",
    "@ui5/webcomponents-icons-tnt": "^2.9.0",
    "@ui5/webcomponents-react": "2.9.2",
    "eslint": "9.24.0",
    "eslint-config-next": "15.3.0",
    "next": "15.3.0",
    "react": "19.1.0",
    "react-dom": "19.1.0"
  },
  "devDependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.3.0",
    "@types/jest": "^29.5.14",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.8.3"
  }
}

I saw that Jest does not support ECMAScript Modules (https://stackoverflow.com/a/75604417).

So I was wondering if this could be the problem.

I could try to build a minimal reproducible example but before I do that I wanted to ask if Jest is generally working with this library (and Next + typescript), if someone has a running Jest setup that they can share or if there are any work arounds for the error.

[Lukas742]

Hi @philippkolbe

testing (ui5) web components with JSDOM is generally discouraged mainly because:

• JSDOM is a node DOM emulator, not a full browser: It lacks many browser APIs (e.g., ResizeObserver, IntersectionObserver, matchMedia), requiring manual polyfills or mocks for testing web components.
• No layout engine or full CSSOM support: JSDOM doesn't perform rendering or style computations, so methods like getBoundingClientRect and media queries won't function as expected.
• Incomplete Shadow DOM and Custom Elements support: Features like slotting and event retargeting are only partially implemented, leading to unreliable tests for encapsulation and component behavior.

For accurate and reliable testing of web components, it's recommended to use real or headless browser environments such as Cypress offers.

---

Regarding your issue maybe this section of our V1 documentation helps (especially setting transformIgnorePatterns), but since we didn't update it in quite a while, it could be outdated.

[philippkolbe]

Hi @Lukas742,

Thanks! I think I don't need the full UI/Browser/actual DOM Features since I am mainly interested in testing the logic.

I think Jest has a nicer interface and not having to spin up a headless browser is probably also more efficient, right? I think an official guide for Jest would be very helpful (if that is possible).

Nevertheless I will probably end up using Cypress because setting up Jest properly seems like a lot of pain.

[philippkolbe]

Wasn't jest-setup removed from the library? Read that in the Migration guide...

[Lukas742]

Yes, but creating one will be necessary as otherwise you won't be able to mock/polyfill unsupported browser APIs, that are required by some components.
You could copy our old setup file, but I recommend using the dom-shim ui5-webcomponents offers instead, as it's up to date. The shim is applied automatically when used in a node environment, otherwise it has to be imported manually. You can find out more about it in this comment. This will not solve your transformation issue though.