[Bug]: Jest 27 Fails to Resolve React.memo and Lodash Functions in Tests

[shridevishetty18]

Version

27.4.7

Steps to reproduce

Create a React component that uses React.memo and a Lodash function like _.mapValues.
Write a Jest test that imports and renders this component.
Run the test with Jest.

I am encountering an issue where specific methods from React (e.g., React.memo) and Lodash (e.g., _.mapValues) are undefined during Jest tests, leading to errors such as:
Module Mapping: I used moduleNameMapper in my Jest configuration to map lodash-es to lodash, but it did not resolve the issue.
Direct Imports: Importing functions like memo and mapValues directly (e.g., import { memo } from 'react'; and import mapValues from 'lodash/mapValues';) worked, but this is not ideal for a large project with extensive use of Lodash and React.
Clearing Jest Cache and Reinstalling Modules: I cleared the Jest cache and reinstalled all dependencies, but the issue remained.

TypeError: Cannot read properties of undefined (reading 'memo')
TypeError: Cannot read properties of undefined (reading 'mapValues')

all the failed testcases are working in 26.6.3 jest version after the upgradation it failing

Expected behavior

Jest should correctly resolve and execute React.memo and Lodash methods like _.mapValues without throwing errors.

Actual behavior

Jest fails to resolve React.memo and _.mapValues, causing tests to fail with TypeError: Cannot read properties of undefined.

Additional context

It seems that Jest’s handling of ES modules or module resolution for certain libraries might be causing these methods to become undefined. This could be related to Jest’s changes in how ES modules are processed in version 27 and later.

attaching the jest.test.config.js file:
const {jsWithTs} = require('ts-jest/presets');
module.exports = {
automock: true,
collectCoverage: false,
coverageReporters: ['clover', 'html'],
collectCoverageFrom: [
'src/app//*.js',
'src/app//.ts',
'src/app/**/.tsx'
],
coveragePathIgnorePatterns: [
'src/app/dist/.',
'src/app/outage-page/.',
'src/app/stories/.',
'./mocks/.',
'./tests/.',
'./..d.ts',
'src/app/common/utils/TestUtils.ts'
],
globals: {
'ts-jest': {
tsconfig: '/tsconfig.test.json',
babelConfig: '/.babelrc',
diagnostics: false
}
},
testPathIgnorePatterns: ['/src/app/stories/'],
preset: 'ts-jest/presets/js-with-babel-esm',
modulePaths: ['/src/app/'],
roots: ['/src/app/'],
transform: {
'^.+\.svg$': '/src/svg-jest-preprocessor.js',
'^.+\.xml$': '/src/xml-jest-preprocessor.js'
},
transform: {
// ...jsWithTs.transform,
...jsWithTs.transform,
'^.+\.svg$': '/src/svg-jest-preprocessor.js',
'^.+\.xml$': '/src/xml-jest-preprocessor.js',
'^.+\.js$': 'babel-jest', // Assuming Babel is used to process JS files
'^.+\.tsx?$': 'ts-jest'
},
testRunner: 'jasmine2',
testEnvironment: 'jsdom',
setupFiles: [
'/src/setup-polyfills.js',
'/src/setup-enzyme.js',
'/src/app/mocks/react-sizeme.js',
'/src/app/mocks/react-redux.js',
'/src/app/mocks/store.js',
'/src/app/mocks/lodash.js',
'/src/app/common/utils/mocks/ApiUtils.js',
'/src/app/common/utils/mocks/FilterUtils.js',
'/src/app/common/utils/mocks/PublicationQueue.js',
'/src/app/common/utils/mocks/Translate.js',
'/src/app/common/HOCs/mocks/ErrorBoundaryHOC.js',
'/src/app/common/HOCs/mocks/ModalContentHOC.js'
],
testRegex: (() => {
if (!process.argv.includes('--useReact16=true')) {
return 'src\/app\/.\/rtl\/test\/.\.js$';
} else {
return '^(?!.\/rtl\/test\/).-test\.js$';
}
})(),
timers: 'fake',
setupFilesAfterEnv: ['/src/setup-jasmine-env.js'],
moduleNameMapper: {
'^.+\.(scss)$': 'identity-obj-proxy',
'^lodash-es$': 'lodash',
},
unmockedModulePathPatterns: [
'connect-to-stores',
'react',
'react-dom',
'react-addons-test-utils',
'react-shallow-testutils',
'react-router-dom',
'prop-types',
'classnames',
'lodash',
'babel-',
'@babel/',
'core-js',
'regenerator-runtime',
'immutable',
'intl',
'jasmine-reporters',
'when',
'crypto-js',
'parse-domain',
'react-clipboard.js',
'querystringify',
'mockdate',
'mock-promises',
'create-react-class',
'parse5',
'fbjs',
'enzyme',
'cheerio',
'htmlparser2',
'domhandler',
'object.assign',
'define-properties',
'function-bind',
'object-keys',
'object.values',
'es-abstract',
'url-parse',
'orion-rwc',
'common/components/PureComponent',
'common/components/modal/ModalRenderer',
'common/utils/PropTypes',
'common/utils/RenderTestUtils',
'common/utils/RecordUtils',
'common/utils/AltUtils',
'common/utils/OrionApiUtils',
'common/utils/UrlUtils',
'common/utils/FilterUtils',
'common/utils/TypeGuards',
'common/utils/ReduxUtils',
'common/utils/TestUtils',
'common/utils/IdsUtils',
'common/HOC/',
'http-status-codes',
'dispatcher/alt',
'settings',
'routepaths',
'api',
'redux-saga',
'redux-saga/effects',
'redux-saga-test-plan',
'reselect',
'@testing-library/react',
'node-forge'
]
};

if (process.argv.includes('--useReact16=true')) {
module.exports.moduleNameMapper = {
...module.exports.moduleNameMapper,
'^react-dom((\/.)?)$': 'react-dom-16$1',
'^react((\/.)?)$': 'react-16$1'
};
}

Environment

Environment:

 "jest": "^27.4.7",
 "@types/jest": "^27.4.0",
"jest-environment-jsdom": "^27.4.4",
 "ts-jest": "^27.1.3",
 "babel-jest": "^27.4.6",
 "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
Node Version:  18.19.0
Operating System:  Ubuntu 20.04
Relevant Dependencies:

React Version: 18.2.0
Lodash Version: 4.17.21,
 webpack: "5.76.0"

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.