[Bug]: Mock ESM module not working

Version

27.3.1

Steps to reproduce

In my angular project I am using the library swiper. Swiper migrated to esm with version 7. My Jest is actually configured to use CommonJS and not esm, because the esm support seems not really stabel and its not recommended to use experimental features in production mode like node vm-module.

In my angular component I am importing the swiper module like:

import { Swiper } from ‘swiper’;

If I am mocking the swiper module directly within the spec file like

jest.mock(‘swiper’, () => ({ __esModule: true, Swiper: jest.fn().mockImplementation(() => new MockSwiper()), Navigation: jest.fn(), Mousewheel: jest.fn(), Keyboard: jest.fn(), Autoplay: jest.fn(), Pagination: jest.fn(), default: jest.fn().mockImplementation(() => new MockSwiper()) }));

all is working fine. But I would like to mock the swiper module more global at the mocks folder. I am doing this like

const Swiper = jest.fn().mockImplementation(() => new MockSwiper()); export default Swiper; export { Swiper };

with the preset option:

moduleNameMapper: { swiper: ‘<rootDir>/…/…/mocks/swiper.js’, },

This generate the error:

Cannot read property ‘ɵcmp’ of undefined TypeError: Cannot read property ‘ɵcmp’ of undefined

I followed the Jest documentation. I think this could be a bug or I am doing somthing wrong?

Expected behavior

Esm modules could be mocked.

Actual behavior

Esm modules could be mocked.

Additional context

The following error appears:

Cannot read property ‘ɵcmp’ of undefined TypeError: Cannot read property ‘ɵcmp’ of undefined

Environment

Node: 14.17.0
Angular: 12.2.12
NX: 13.1.3

[anschm]

Yes, this solves the problem. Thanks.

[savifon]

It solved it, but it doesn’t render Swiper in the test, so you can’t do the internal tests.