如何在 Angular Nx 存储库中使用 Jest 测试 Swiper 库？

Question

我有一个 Nx 存储库，其中包含 Angular 应用程序和 Jest 作为测试框架。该应用程序有一个使用Swiper 的组件库的组件。当尝试测试该组件时，我收到以下错误消息：

\n

  \xe2\x97\x8f Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here\'s what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You\'ll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/configuration\n    For information about custom transformations, see:\n    https://jestjs.io/docs/code-transformation\n\n    Details:\n\n    C:\\Users\\Philippe\\Documents\\Projects\\temp\\swiper-angular-nx-jest\\node_modules\\ssr-window\\ssr-window.esm.js:148\n    export { extend, getDocument, getWindow, ssrDocument, ssrWindow };\n    ^^^^^^\n\n\n      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1728:14)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        4.775 s\nRan all test suites.\n\n \xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94 \n\n >  NX   Ran target test for project client (9s)\n\n    \xc3\x97    1/1 failed\n    \xe2\x88\x9a    0/1 succeeded [0 read from cache]\n\nPS C:\\Users\\Philippe\\Documents\\Projects\\temp\\swiper-angular-nx-jest> nx test\n\n> nx run client:test\n\n FAIL   client  apps/client/src/app/carousel/carousel.component.spec.ts\n  \xe2\x97\x8f Test suite failed to run\n\n    Cannot find module \'swiper_angular\' from \'src/app/carousel/carousel.component.ts\'\n\n    Require stack:\n      src/app/carousel/carousel.component.ts\n      src/app/carousel/carousel.component.spec.ts\n\n       5 | } from \'@angular/core\';\n       6 | import SwiperCore, { Virtual } from \'swiper\';\n    >  7 | import { SwiperComponent, SwiperModule } from \'swiper/angular\';\n         | ^\n       8 |\n       9 | // install Swiper modules\n      10 | SwiperCore.use([Virtual]);\n      at Resolver.resolveModule (../../node_modules/jest-resolve/build/resolver.js:324:11)\n      at Object.<anonymous> (src/app/carousel/carousel.component.ts:7:1)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        22.235 s\nRan all test suites.\n\n \xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94 \n\n >  NX   Ran target test for project client (26s)\n\n    \xc3\x97    1/1 failed\n    \xe2\x88\x9a    0/1 succeeded [0 read from cache]\n\nPS C:\\Users\\Philippe\\Documents\\Projects\\temp\\swiper-angular-nx-jest> nx test\n\n> nx run client:test\n\n FAIL   client  apps/client/src/app/carousel/carousel.component.spec.ts\n  \xe2\x97\x8f Test suite failed to run\n\n    Cannot find module \'swiper_angular\' from \'src/app/carousel/carousel.component.ts\'\n\n    Require stack:\n      src/app/carousel/carousel.component.ts\n      src/app/carousel/carousel.component.spec.ts\n\n       5 | } from \'@angular/core\';\n       6 | import SwiperCore, { Virtual } from \'swiper\';\n    >  7 | import { SwiperComponent, SwiperModule } from \'swiper/angular\';\n         | ^\n       8 |\n       9 | // install Swiper modules\n      10 | SwiperCore.use([Virtual]);\n\n      at Resolver.resolveModule (../../node_modules/jest-resolve/build/resolver.js:324:11)\n      at Object.<anonymous> (src/app/carousel/carousel.component.ts:7:1)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        4.117 s\nRan all test suites.\n\n \xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\n\n >  NX   Ran target test for project client (8s)\n\n    \xc3\x97    1/1 failed\n    \xe2\x88\x9a    0/1 succeeded [0 read from cache]\n

\n

我尝试过以下想法，但没有运气：

\n

\n
• 带有 nx 测试的 Angular v13 Jest - SyntaxError：无法在 Runtime.createScriptFromCode 的模块外部使用 import 语句
\n
• https://github.com/nrwl/nx/issues/7170
\n
• https://github.com/nrwl/nx/issues/7844
\n

\n

这是我的 jest.config.ts：

\n

module.exports = {\n  displayName: \'client\',\n  preset: \'../../jest.preset.ts\',\n  setupFilesAfterEnv: [\'<rootDir>/src/test-setup.ts\'],\n  globals: {\n    \'ts-jest\': {\n      tsconfig: \'<rootDir>/tsconfig.spec.json\',\n      stringifyContentPathRegex: \'\\\\.(html|svg)$\',\n    },\n  },\n  coverageDirectory: \'../../coverage/apps/client\',\n  transform: {\n    \'^.+\\\\.(ts|mjs|js|html)$\': \'jest-preset-angular\',\n  },\n  transformIgnorePatterns: [`<rootDir>/node_modules/(?!.*\\\\.mjs$|swiper)`],\n  snapshotSerializers: [\n    \'jest-preset-angular/build/serializers/no-ng-attributes\',\n    \'jest-preset-angular/build/serializers/ng-snapshot\',\n    \'jest-preset-angular/build/serializers/html-comment\',\n  ],\n};\n

\n

这是该组件：

\n

import { CommonModule } from \'@angular/common\';\nimport {\n  ChangeDetectionStrategy, Component, NgModule,\n  ViewChild\n} from \'@angular/core\';\nimport SwiperCore, { Virtual } from \'swiper\';\nimport { SwiperComponent, SwiperModule } from \'swiper/angular\';\n\n// install Swiper modules\nSwiperCore.use([Virtual]);\n\n@Component({\n  selector: \'swiper-angular-nx-jest-carousel\',\n  template: `\n    <swiper #swiper [virtual]="true">\n      <ng-template swiperSlide>Slide 1</ng-template>\n      <ng-template swiperSlide>Slide 2</ng-template>\n      <ng-template swiperSlide>Slide 3</ng-template>\n      <ng-template swiperSlide>Slide 4</ng-template>\n      <ng-template swiperSlide>Slide 5</ng-template>\n      <ng-template swiperSlide>Slide 6</ng-template>\n      <ng-template swiperSlide>Slide 7</ng-template>\n    </swiper>\n    <button (click)="slidePrev()">Prev slide</button>\n    <button (click)="slideNext()">Next slide</button>\n  `,\n  styleUrls: [\'./carousel.component.css\'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CarouselComponent {\n   @ViewChild(\'swiper\', { static: false }) swiper!: SwiperComponent;\n  slideNext(){\n    this.swiper.swiperRef.slideNext(100);\n  }\n  slidePrev(){\n    this.swiper.swiperRef.slidePrev(100);\n  }\n}\n\n@NgModule({\n  imports: [CommonModule, SwiperModule],\n  declarations: [CarouselComponent],\n  exports: [CarouselComponent],\n})\nexport class CarouselComponentModule {}\n

\n

和测试文件：

\n

import { ComponentFixture, TestBed } from \'@angular/core/testing\';\nimport { CarouselComponent, CarouselComponentModule } from \'./carousel.component\';\n\n\ndescribe(\'CarouselComponent\', () => {\n  let component: CarouselComponent;\n  let fixture: ComponentFixture<CarouselComponent>;\n\n  beforeEach(async () => {\n    await TestBed.configureTestingModule({\n      imports: [CarouselComponentModule],\n    }).compileComponents();\n  });\n\n  beforeEach(() => {\n    fixture = TestBed.createComponent(CarouselComponent);\n    component = fixture.componentInstance;\n    fixture.detectChanges();\n  });\n\n  it(\'should create\', () => {\n    expect(component).toBeTruthy();\n  });\n});\n

\n

我在一个小仓库中重现了该问题，您可以在这里找到： https: //github.com/snowfrogdev/swiper-angular-nx-jest

\n

Answer 1

\n
1. 不需要jest.config.ts提及swiper库，保留默认值transformIgnorePatterns：
\n

\n

transformIgnorePatterns: [`<rootDir>/node_modules/(?!.*\\\\.mjs$)`],

\n

\n
2. CarouselComponentModule如果您确实想让它远离app.module.ts：我创建了，请将您的文件提取到一个单独的文件中apps/client/src/app/carousel/carousel-component.module.ts用内容
\n

\n

import { CommonModule } from \'@angular/common\';\nimport { NgModule } from \'@angular/core\';\nimport { SwiperModule } from \'swiper/angular\';\nimport { CarouselComponent } from \'./carousel.component\';\n\n@NgModule({\n  imports: [CommonModule, SwiperModule],\n  declarations: [CarouselComponent],\n  exports: [CarouselComponent],\n})\nexport class CarouselComponentModule {}\n

\n

\n

3. 更新导入app.module.ts

   \n
\n

4. 清理你的组件文件carousel.component.ts

   \n
\n

\n

import { ChangeDetectionStrategy, Component, ViewChild } from \'@angular/core\';\nimport SwiperCore, { Virtual } from \'swiper\';\nimport { SwiperComponent } from \'swiper/angular\';\n\n// install Swiper modules\nSwiperCore.use([Virtual]);\n\n@Component({\n  selector: \'swiper-angular-nx-jest-carousel\',\n  template: `\n    <swiper #swiper [virtual]="true">\n      <ng-template swiperSlide>Slide 1</ng-template>\n      <ng-template swiperSlide>Slide 2</ng-template>\n      <ng-template swiperSlide>Slide 3</ng-template>\n      <ng-template swiperSlide>Slide 4</ng-template>\n      <ng-template swiperSlide>Slide 5</ng-template>\n      <ng-template swiperSlide>Slide 6</ng-template>\n      <ng-template swiperSlide>Slide 7</ng-template>\n    </swiper>\n    <button (click)="slidePrev()">Prev slide</button>\n    <button (click)="slideNext()">Next slide</button>\n  `,\n  styleUrls: [\'./carousel.component.css\'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CarouselComponent {\n  @ViewChild(\'swiper\', { static: false }) swiper!: SwiperComponent;\n  slideNext() {\n    this.swiper.swiperRef.slideNext(100);\n  }\n  slidePrev() {\n    this.swiper.swiperRef.slidePrev(100);\n  }\n}\n

\n

\n
5. 添加到apps/client/tsconfig.spec.json路径中swiper_angular中compilerOptions
\n

\n

"paths": {\n      "swiper_angular": ["node_modules/swiper/angular"]\n

\n

\n
6. 最后，你的测试会是这样的
\n

\n

import { ComponentFixture, TestBed, waitForAsync } from \'@angular/core/testing\';\nimport { CarouselComponent } from \'./carousel.component\';\n\ndescribe(\'CarouselComponent\', () => {\n  let component: CarouselComponent;\n  let fixture: ComponentFixture<CarouselComponent>;\n\n  beforeEach(waitForAsync(() => {\n    TestBed.configureTestingModule({\n      declarations: [CarouselComponent],\n    })\n      .compileComponents()\n      .then(() => {\n        fixture = TestBed.createComponent(CarouselComponent);\n        component = fixture.componentInstance;\n        fixture.detectChanges();\n      });\n  }));\n\n  it(\'should create\', () => {\n    expect(component).toBeTruthy();\n  });\n});\n

\n

然而，由于以下原因，它仍然不起作用

\n

Cannot read property \'\xc9\xb5cmp\' of undefined\n

\n

错误

\n