'SwiperJS failing Jest unit tests with "Cannot read property ngModule of undefined"
I am using Swiper v8 for my Angular v12 project that resides in an Nx monorepo.
To give some context, the Swiper carousel component is declared in a module and exported as one of the libs in the project. Let's call it @mylib/carousel.
The component Jest tests initially failed with the "Cannot find module swiper_angular" error and a quick search in SO suggests a fix like this:
"compilerOptions": {
...
"paths": {
...
"swiper_angular": ["node_modules/swiper/angular"]
}
}
I put the code above in tsconfig.base.json file in the repo root alongside other libs alias paths.
The error went away but a new set of errors came in about Unexpected token 'export'.
Dev/my-app/node_modules/swiper/angular/swiper_angular.d.ts:5
export * from './swiper-angular';
^^^^^^
SyntaxError: Unexpected token 'export'
These new errors were showing up in unit tests in the @mylib/carousel lib as well as other apps and libs that were importing the @mylib/carousel.
Further searching suggests using transformIgnorePattern syntax in jest.config.js:
transformIgnorePatterns: [
'node_modules/(?!swiper|ssr-window|dom7)'
]
I have tried adding the transformIgnorePatterns code into various jest.config.js files but it did not fix the issue entirely. From my observation, there were two outcomes:
When I added the line in the @mylib/carousel jest.config.js file, the unit tests passed.
When I added the line in other libs and apps jest.config.js files that are importing the @mylib/carousel, the Unexpected token export error was gone but a new error showed up in files that were importing a lib that depended on @mylib/carousel.
apps/shop-app/src/app/modules/cart/cart.component.spec.ts
● CartComponent › should create
TypeError: Cannot read property 'ngModule' of undefined
at isModuleWithProviders (../../../packages/core/src/render3/jit/module.ts:560:38)
at expandModuleWithProviders (../../../packages/core/src/render3/jit/module.ts:553:7)
at Array.map (<anonymous>)
at Function.get (../../../packages/core/src/render3/jit/module.ts:125:25)
at getNgModuleDef (../../../packages/core/src/render3/definition.ts:745:27)
at isNgModule (../../../packages/core/src/render3/jit/module.ts:564:12)
at ../../../packages/core/src/render3/jit/module.ts:492:10
at Array.forEach (<anonymous>)
at transitiveScopesFor (../../../packages/core/src/render3/jit/module.ts:486:30)
at setScopeOnDeclaredComponents (../../../packages/core/src/render3/jit/module.ts:416:28)
at Object.flushModuleScopingQueueAsMuchAsPossible [as ɵflushModuleScopingQueueAsMuchAsPossible] (../../../packages/core/src/render3/jit/module.ts:59:11)
at TestBedRender3.Object.<anonymous>.TestBedRender3.checkGlobalCompilationFinished (../../../packages/core/testing/src/r3_test_bed.ts:445:7)
at TestBedRender3.Object.<anonymous>.TestBedRender3.resetTestingModule (../../../packages/core/testing/src/r3_test_bed.ts:261:10)
at Function.Object.<anonymous>.TestBedRender3.resetTestingModule (../../../packages/core/testing/src/r3_test_bed.ts:194:26)
at ../../../packages/core/testing/src/test_hooks.ts:38:15
at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
at Object.wrappedFunc (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)
Appreciate any guidance I can get as I have been spending the entire weekend trying to solve this.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
