[Jest Testcase] Issue in running the test case after upgrading to ui5 web components 2.8.0

[vdhyutidhara]

Bug Description

Hi Team,
I am having an issue in running the test cases.
I am using "jest": "29.5.0"
My jest config in package.json is

"jest": {
        "transformIgnorePatterns": [
            "node_modules/*\\.js$"
        ],
        "moduleNameMapper": {
            "ace-builds": "<rootDir>/node_modules/ace-builds",
            "^@ui5/webcomponents-base/jsx-runtime$": "<rootDir>/node_modules/@ui5/webcomponents-base/dist/jsx-runtime.js",
            "^@ui5/webcomponents-base/Keys.js$": "<rootDir>/node_modules/@ui5/webcomponents-base/dist/Keys.js"
        },
        "coverageReporters": [
            "json",
            "html",
            "lcov",
            "text"
        ]
    },

My jest.config.js configuration is,

module.exports = {
    roots: ['./src'],
    transform: {
        '^.+\\.tsx?$': 'ts-jest',
        '^.+\\.jsx?$': 'babel-jest'
    },
    testRegex: '(/tests/.*|(\\.|/)(test|spec))\\.tsx?$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    testPathIgnorePatterns: ['/node_modules/', '/public/'],
    moduleNameMapper: {
        '[\\.(css|less|scss|sss|styl)$](file://.(css|less|scss|sss|styl)$)': '<rootDir>/node_modules/jest-css-modules'
    },
    globals: {
        'ts-jest': {
            tsconfig: 'tsconfig.json'
        }
    },
    testEnvironment: 'jsdom',
    verbose: true,
    setupFiles: ['<rootDir>/enzyme.config.js'],
    preset: 'ts-jest/presets/js-with-ts'
}

When I have added shim import in App.tsx:
import '@ui5/webcomponents-base/dist/ssr-dom-shim.js';
I am getting the following test failures along with frontend issues like ui5-dialog not opening, Analytical table not rendering properly, etc.
Test Error
TypeError: Cannot destructure property 'labels' of 'internals' as it is undefined.

When I have not added the above shim import in App.tsx, my frontend issues automatically resolve, but still getting the following error on running the test case
TypeError: Cannot destructure property 'labels' of 'internals' as it is undefined.

When I remove the shim import setupTest.js, I am getting the following error for all test cases:

Currently, I am not facing any UI issues. I have only been facing problems in running my test cases.
Please help us to resolve the issue because we have been stuck in this for quite a long time. We need to upgrade it on high priority.

Affected Component

No response

Expected Behaviour

No response

Isolated Example

No response

Steps to Reproduce

1. npm run test

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.8.0

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Organization

SAP Labs India

Declaration

• I’m not disclosing any internal or sensitive information.

[nnaydenow]

Hi @vdhyutidhara,

Have you tried aligning the moduleNameMapper in both configurations? I'm not entirely sure how Jest handles multiple config sources—does it merge them, or does it prioritize the config file over the package.json?

Please take a look also in the comments of that issue: SAP/ui5-webcomponents#10744

[vdhyutidhara]

Hi @nnaydenow @ilhan007,
I have already tried the resolution shared in SAP/ui5-webcomponents#10744 link. But that doesn't solve my problem.

Related to the configuration precedence, I read that the package.json gets more precedence over jest.config.js file.
I have also tried moving all moduleNameMapper to jest.config.js file. I get below error

Also, when I moved all moduleNameMapper to package,json file. I get below error

Please help us to resolve this issue.

[nnaydenow]

Hi @vdhyutidhara,

Please provide somewhere we can reproduce the problem or provide repository offline where we can debug.

Regards,
Nayden

[nnaydenow]

Hello @Lukas742, @MarcusNotheis,

I've traced the issue to @ui5/webcomponents-react/dist/Assets.js, which imports ./json-imports/i18n-fetch.js.

Later on, this PR introduced new files with a -fetch suffix. From what I see, your Assets.js file is generated and includes one of these -fetch files as well.

These -fetch files calculate a URL using import.meta.url and use fetch(), which causes errors in certain bundlers.

Could you please take a look?

---

Hi @vdhyutidhara,

As a temporary workaround until the issue is resolved, you can replace the import:

import '@ui5/webcomponents-react/dist/Assets';

with the individual imports, excluding the assets that trigger fetch calls:

import '@ui5/webcomponents/dist/Assets.js';
import '@ui5/webcomponents-fiori/dist/Assets.js';
import '@ui5/webcomponents-react/dist/json-imports/i18n.js';

This should help avoid the problem caused by the -fetch files.

Regards,
Nayden

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v2.10.1 🎉

The release is available on v2.10.1

Your semantic-release bot 📦🚀