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

[vdhyutidhara]

Describe the bug

Hi Team,
I have update my ui5-webcomponent version from 2.14.0 to 2.20.1.
I am facing the below issue while running the test cases. Please help us to resolve this issue.

This is my package.json configuration

{
	"name": "action-editor",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"build": "webpack --mode=production",
		"build-prod": "webpack --mode=production",
		"build-dev": "webpack --mode=development",
		"lint": "tslint -p tsconfig.json",
		"start-app-router": "cd approuter && npm i && npm run start",
		"start": "webpack serve",
		"test": "react-scripts test --watchAll=false",
		"test-coverage": "npm test -- --coverage --watchAll=false --maxWorkers=2 --max_old_space_size=2048 --logHeapUsage --silent",
		"test-debug": "node --inspect-brk node_modules/.bin/jest --watch --no-cache --runInBand",
		"test-watch": "jest --watch",
		"eslint": "eslint 'src/*.ts' 'src/*.tsx' 'src/**/*.tsx'",
		"eslint-fix": "eslint 'src/*.ts' 'src/*.tsx' 'src/**/*.tsx' --fix"
	},
	"jest": {
		"transformIgnorePatterns": [
			"node_modules/*\\.js$",
			"node_modules/(?!(@ui5|lit-html|@babel)).*\\.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"
		]
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
		"@sap-build/actions-webcomponents": "1.5.8",
		"@sap-px/pxapi": "3.0.9",
		"@stoplight/json-ref-resolver": "3.1.6",
		"@tanstack/react-query": "5.90.20",
		"@types/react": "18.0.33",
		"@types/react-dom": "18.3.7",
		"@ui5/webcomponents": "2.20.1",
		"@ui5/webcomponents-base": "2.20.1",
		"@ui5/webcomponents-compat": "2.20.1",
		"@ui5/webcomponents-fiori": "2.20.1",
		"@ui5/webcomponents-icons": "2.20.1",
		"@ui5/webcomponents-icons-business-suite": "2.20.1",
		"@ui5/webcomponents-localization": "2.20.1",
		"@ui5/webcomponents-react": "2.20.1",
		"@ui5/webcomponents-react-compat": "2.20.1",
		"@ui5/webcomponents-theming": "2.20.1",
		"ace-builds": "1.16.0",
		"axios": "1.13.6",
		"css-loader": "6.9.1",
		"date-fns": "4.1.0",
		"date-fns-tz": "3.2.0",
		"form-data": "4.0.5",
		"html-webpack-plugin": "5.6.5",
		"http-status-codes": "2.3.0",
		"i18next": "25.7.3",
		"immer": "10.2.0",
		"json-diff-ts": "1.2.8",
		"ajv": "8.18.0",
		"ajv-formats": "3.0.1",
		"mini-css-extract-plugin": "2.9.4",
		"prop-types": "15.8.1",
		"react": "18.2.0",
		"react-ace": "14.0.1",
		"react-dom": "18.2.0",
		"react-i18next": "12.3.1",
		"react-router-dom": "6.30.3",
		"react-test-renderer": "18.3.1",
		"style-loader": "3.3.4",
		"to-json-schema": "0.2.5",
		"ts-loader": "9.5.4",
		"typescript": "5.9.3",
		"uuid": "11.1.0",
		"webpack": "5.105.4",
		"webpack-cli": "6.0.1",
		"webpack-dev-server": "5.2.3",
		"zod": "3.22.4",
		"zustand": "5.0.9"
	},
	"devDependencies": {
		"@babel/preset-env": "7.27.2",
		"@babel/preset-react": "7.18.6",
		"@babel/preset-typescript": "7.21.4",
		"@testing-library/dom": "^10.4.0",
		"@testing-library/jest-dom": "6.6.3",
		"@testing-library/react": "16.3.0",
		"@testing-library/react-hooks": "8.0.1",
		"@testing-library/user-event": "14.6.1",
		"@types/jest": "29.5.0",
		"@types/testing-library__jest-dom": "5.14.5",
		"@typescript-eslint/eslint-plugin": "5.57.1",
		"@typescript-eslint/parser": "5.57.1",
		"eslint": "8.37.0",
		"eslint-config-prettier": "8.8.0",
		"eslint-config-standard": "17.0.0",
		"eslint-plugin-import": "2.32.0",
		"eslint-plugin-jest": "27.2.1",
		"eslint-plugin-node": "11.1.0",
		"eslint-plugin-prettier": "4.2.1",
		"eslint-plugin-promise": "6.1.1",
		"eslint-plugin-react": "7.32.2",
		"eslint-plugin-react-hooks": "4.6.0",
		"intersection-observer": "0.12.2",
		"jest": "30.0.2",
		"jest-css-modules": "2.1.0",
		"lint-staged": "13.2.0",
		"prettier": "2.8.7",
		"pretty-quick": "3.1.3",
		"react-scripts": "5.0.1",
		"regenerator-runtime": "0.14.1",
		"resize-observer-polyfill": "1.5.1",
		"ts-jest": "29.4.0"
	},
	"overrides": {
		"form-data": "4.0.5",
		"nth-check": "2.1.1"
	}
}

This is my jest.config.js configuration

module.exports = {
	roots: ['./src'],
	transform: {
		'^.+\\.[tj]sx?$': ['babel-jest', { configFile: './babel.config.json' }]
	},
	testRegex: '(/tests/.*|(\\.|/)(test|spec))\\.tsx?$',
	moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
	testPathIgnorePatterns: ['/node_modules/', '/public/'],
	moduleNameMapper: {
		'\\.(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',
	collectCoverageFrom: [
		'src/**/*.{ts,tsx}',
		'!src/**/*.d.ts',
		'!src/index.tsx',
		'!src/setupTests.js'
	],
	coverageReporters: ['json', 'html', 'lcov', 'text'],
	coverageDirectory: 'coverage'
};

This is my setupTests.js configuration

import ResizeObserverPolyfill from 'resize-observer-polyfill';
import 'intersection-observer';
import 'whatwg-fetch';
import '@ui5/webcomponents-base/dist/ssr-dom-shim.js';


const setupMatchMedia = () => {
  Object.defineProperty(window, 'matchMedia', {
    writable: true,
    value: jest.fn().mockImplementation((query) => {
      const maxWidth = parseInt(/max-width:(?<maxWidth>\d+)px/.exec(query)?.groups?.maxWidth);
      const minWidth = parseInt(/min-width:(?<minWidth>\d+)px/.exec(query)?.groups?.minWidth);

      let matches =
        (minWidth ? minWidth <= window.innerWidth : true) && (maxWidth ? window.innerWidth <= maxWidth : true);

      if (query === '(orientation: landscape)') {
        matches = window.innerWidth > window.innerHeight;
      }

      return {
        matches,
        media: query,
        onchange: null,
        addListener: jest.fn(), // deprecated
        removeListener: jest.fn(), // deprecated
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn()
      };
    })
  });
};

beforeEach(() => {
  setupMatchMedia();
  window.ResizeObserver = ResizeObserverPolyfill;
});

Isolated Example

No response

Reproduction steps

...

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

2.20.1

UI5 Web Components Version

2.20.1

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

Hi @vdhyutidhara

Without a reproducible example it's hard to pin point the root cause for this. As far as I know, nothing changed with the dom shim between the given versions. We also stopped recommending Jest a while ago, so I might not be fully up to date on the specifics. That said, I noticed a few issues in your configuration that could explain this:

1. @lit-labs/ssr-dom-shim missing from transformIgnorePatterns

Your setupTests.js imports ssr-dom-shim.js, which imports from @lit-labs/ssr-dom-shim (ESM). This package is not in your exclusion list. I can't explain why this worked with v2.14.0 though - the import chain hasn't changed. Did you only add the dom-shim in the upgrade, or was it there before?

2. transformIgnorePatterns bugs

• The first pattern (node_modules/*\\.js$) is a broken regex that matches almost nothing
• Multiple patterns are OR'd in Jest, so even a fixed first pattern would override the second's exclusions
• @lit-labs, @lit, and lit are missing from the exclusion list

This might fix it:

"transformIgnorePatterns": [
  "node_modules/(?!(@ui5|lit-html|@lit-labs|@lit|lit))"
]

3. Config conflict

As far as I can remember, react-scripts test passes its own --config to Jest, which would mean your jest.config.js is never read and only the "jest" field in package.json applies. You might want to consolidate to one config source.