带幻灯片的Ionic单元测试抛出TypeError

Question

我有一个组件，引用我的ion-slides在组件初始化期间抛出错误:

<ion-content class="blue-purple-gradient" [fullscreen]="true">
<ion-slides pager="true" #slides>
...
</ion-slide>
</ion-slides>
export class ReEvaluationComponent implements OnInit, OnDestroy, AfterViewInit {
@ViewChild(IonSlides, {static: false}) slides: IonSlides;
...
ngAfterViewInit() {
if (this.slides) {
this.slides.lockSwipeToNext(true)
}
}
}

在运行测试时抛出以下错误:

TypeError: Cannot read properties of undefined (reading 'apply')

测试如下:

describe('ReEvaluationComponent', () => {
beforeEach(async(() => {
NavParamsMock.setParams({
client: {dob: "1991-01-22"}
})
TestBed.configureTestingModule({
declarations: [ ReEvaluationComponent ],
imports: [
IonicModule.forRoot(),
HttpClientTestingModule,
RouterTestingModule,
FormsModule,
SharedModule,
ReactiveFormsModule
],
providers: [
{provide: Storage, useValue: storageMock},
{provide: NavParams, useValue: navParams},
{provide: WeighInsProvider, useValue: weighInsServiceMock},
{provide: GlobalsService, useValue: mockGlobalsService},
{provide: TransactionsProvider, useValue: transactionsServiceMock},
]
}).compileComponents();
}));
beforeEach(() => {
injector = getTestBed()
checkInsService = injector.get(CheckInsProvider)
weighInsService = injector.get(WeighInsProvider)
transactionsService = injector.get(TransactionsProvider)
})
beforeEach(() => {
fixture = TestBed.createComponent(ReEvaluationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
})
it('should create', () => {
expect(component).toBeTruthy();
});
})

Answer 1

Ion-slides将在下一个ionic版本中被弃用，所以与其像你这样尝试实现它，我建议迁移到Swiper，它将成为我们的下一个"ion-slide"，不会给你带来那么多麻烦。

如果你想了解更多:

https://ionicframework.com/docs/api/slides迁移

你可以看看这个视频来解释它的用法:

https://www.youtube.com/watch?v=XcvieKvmI5A

或遵循本教程:

https://ionicacademy.com/swiper-with-ionic/