使用幻灯片进行离子单元测试会引发 TypeError答案

【问题标题】：Ionic unit testing with slides throws TypeError使用幻灯片进行离子单元测试会引发 TypeError
【发布时间】：2021-09-30 10:28:07
【问题描述】：

我有一个组件引用了我的 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();
  });
})

【问题讨论】：

标签： angular unit-testing ionic-framework

【解决方案1】：

Ion-slides 将在下一个 ionic 版本中被弃用，因此我建议不要像您那样尝试实现它，我建议迁移到将成为我们下一个“ion-slide”的 Swiper 并且不会给你带来那么多麻烦。

你可以查看这个解释使用的视频：

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

或按照本教程进行操作：

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

【讨论】：