SwiperJS未通过Jest单元测试,“无法读取未定义的属性ngModule”

busg9geu  于 2023-01-10  发布在  Jest
关注(0)|答案(1)|浏览(194)

我正在使用Swiper v8进行我的Angular v12项目,该项目驻留在Nx monorepo中。
为了给予一些上下文,Swiper carousel组件在一个模块中声明,并作为项目中的一个 * 库 * 导出,我们将其命名为**@mylib/carousel**。
组件Jest测试最初失败,并出现**“Cannot find module swiper_angular”**错误,在SO中快速搜索后建议如下修复:

"compilerOptions": {
    ...
    "paths": {
      ...
      "swiper_angular": ["node_modules/swiper/angular"]
    } 
}

我把上面的代码放在了与其他库别名路径并列的repo根目录下的tsconfig.base.json文件中。
错误消失,但出现了一组关于意外标记“export”的新错误。

Dev/my-app/node_modules/swiper/angular/swiper_angular.d.ts:5
    export * from './swiper-angular';
    ^^^^^^

SyntaxError: Unexpected token 'export'

这些新的错误出现在@mylib/carousel库以及其他导入@mylib/carousel的应用程序和库的单元测试中。
进一步搜索建议在jest.config.js中使用 transformIgnorePattern 语法:

transformIgnorePatterns: [
   'node_modules/(?!swiper|ssr-window|dom7)'
]

我尝试过将 transformIgnorePatterns 代码添加到不同的jest.config.js文件中,但它并没有完全解决这个问题。
1.当我在@mylib/carousel jest.config.js文件中添加该行时,单元测试通过了。
1.当我在导入@mylib/carousel的其他 libsapps jest.config.js文件中添加该行时,Unexpected token export 错误消失了,但在导入依赖于@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)

感谢任何指导,我可以得到,因为我一直在花整个周末试图解决这个问题。

juzqafwq

juzqafwq1#

我也犯了同样的错误。这些问题和其他问题在github的帖子中也有讨论:https://github.com/nolimits4web/swiper/issues/4315
对我来说,至少有两种选择奏效:
1.降级到版本7.4.1(从8.x.x)
1.在jest.config中使用moduleNameMapper更具体一些:

    • 之前**
moduleNameMapper: {
        swiper_angular: '<rootDir>/../../node_modules/swiper/angular',
    },
    transformIgnorePatterns: ['<rootDir>/node_modules/(?!.*\\.mjs$)'],
    • 之后**
moduleNameMapper: {
        swiper_angular: '<rootDir>/../../node_modules/swiper/angular/esm2020/swiper_angular.mjs',
    },
    transformIgnorePatterns: ['<rootDir>/node_modules/(?!.*\\.mjs$)'],

希望这有帮助!

相关问题