'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:

  1. When I added the line in the @mylib/carousel jest.config.js file, the unit tests passed.

  2. 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