将 Swiper 6 升级到 7 后，在单元测试（开玩笑）上找不到模块“swiper_angular”

Posted 2023-05-08

【中文标题】将 Swiper 6 升级到 7 后，在单元测试（开玩笑）上找不到模块“swiper_angular”

【英文标题】：Cannot find module 'swiper_angular' on unit test (jest) after upgrading Swiper 6 to 7

【发布时间】：2022-01-12 18:20:29

【问题描述】：

我在upgrading Swiper 6 to 7 之后的单元测试中遇到了问题。我正在使用 Angular 12 和 Swiper 7.3.1。在升级之前，单元测试运行良好（Swiper 版本 6.5.9）。

我在这样的测试中使用SwiperModule：

import  CUSTOM_ELEMENTS_SCHEMA  from '@angular/core';
import  ComponentFixture, TestBed, waitForAsync  from '@angular/core/testing';
import  of  from 'rxjs';
import  SwiperComponent, SwiperModule  from 'swiper/angular';

import  TeaserWrapperContainerComponent  from './teaser-wrapper-container.component';
import  InterfaceState  from '@migrosonline/shared-deps-all/core/interface/interface.store';


describe('TeaserWrapperContainerComponent', () => 
    let component: TeaserWrapperContainerComponent;
    let fixture: ComponentFixture<TeaserWrapperContainerComponent>;

const mockedSwiperComponent = 
        swiperRef: 
            slideNext: jest.fn(),
            slidePrev: jest.fn(),
            destroy: jest.fn(),
            update: jest.fn()
        
     as unknown as SwiperComponent;

beforeEach(
        waitForAsync(() => 
            mockedInterfaceService.prototype.select = jest.fn();

            TestBed.configureTestingModule(
                declarations: [TeaserWrapperContainerComponent],
                imports: [SwiperModule],
                providers: [ provide: InterfaceService, useClass: mockedInterfaceService ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
            ).compileComponents();
        )
    );

    beforeEach(() => 
        fixture = TestBed.createComponent(TeaserWrapperContainerComponent);
        component = fixture.componentInstance;
        component.teaserGroupSliderRef = mockedSwiperComponent;
    );

    it('should create', () => 
        fixture.detectChanges();

        expect(component).toBeTruthy();
    );

);

我得到的错误是这样的：

Cannot find module 'swiper_angular' from 'src/lib/shared/teaser/teaser-wrapper-container/teaser-wrapper-container.component.spec.ts'

      3 | import  of  from 'rxjs';
    > 4 | import  SwiperComponent, SwiperModule  from 'swiper/angular';

如果有任何想法/cmets/建议，我将不胜感激。

【参考方案1】：

如果其他人遇到此问题，则问题与测试的 eslint 或 tslint 配置有关，并且已修复将 swiper_angular 添加到 tsconfig.json 中的 compilerOptions > 路径（或tsconfig.spec.json) 文件：

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

我在 Swiper 问题中找到了解决方案：https://github.com/nolimits4web/swiper/issues/4315

【讨论】：

我在我的 Nx monorepo 应用程序中尝试了这种方法。它修复了 swiper_angular not found 问题，但在运行测试时引入了其他有关“找不到库”的致命错误。

【参考方案2】：

如果您在导入模块时遇到问题，只需在测试顶部以这种方式模拟它：

jest.mock('swiper/angular', () => (
    SwiperModule: jest.fn(),
));

https://jestjs.io/docs/mock-functions#mocking-modules

如果您需要声明 SwiperComponent，只需在测试顶部模拟它：

@Component(
    selector: 'swiper',
    template: '',
)
export class SwiperMockComponent 
    @Input() pagination = false; // if pagination is needed

并在 TestBed 或 MockBuilder 中声明：

TestBed.configureTestingModule(
    declarations: [SomeComponent, SwiperMockComponent],
    ...
);

【讨论】：

您介意分享您的完整规范文件代码吗？我有兴趣了解这种方法。