Tengo un problema en las pruebas de mi unidad después de actualizar Swiper 6 a 7 . Estoy usando Angular 12 y Swiper 7.3.1. Antes de actualizarlo, las pruebas unitarias funcionaban bien (Swiper versión 6.5.9).
Estoy usando SwiperModule en mis pruebas de esta manera:
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(); }); });y el error que me sale es este:
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';Agradecería cualquier idea/comentario/sugerencia.
En caso de que alguien más se encuentre con este problema, el problema estaba relacionado con la configuración de eslint o tslint para la prueba y se arregló agregando swiper_angular a compilerOptions > rutas en el tsconfig.json (o tsconfig.spec.json ):
"compilerOptions": { ... "paths": { "swiper_angular": ["node_modules/swiper/angular"] } }Encontré la solución en los problemas de Swiper: https://github.com/nolimits4web/swiper/issues/4315
Si tiene problemas para importar un módulo, simule de esta manera en la parte superior de su prueba:
jest.mock('swiper/angular', () => ({ SwiperModule: jest.fn(), }));https://jestjs.io/docs/mock-functions#mocking-modules
Si necesita declarar SwiperComponent, simplemente simule en la parte superior de su prueba:
@Component({ selector: 'swiper', template: '', }) export class SwiperMockComponent { @Input() pagination = false; // if pagination is needed }Y declararlo en TestBed o MockBuilder:
TestBed.configureTestingModule({ declarations: [SomeComponent, SwiperMockComponent], ... });