Menguji Swiper dengan Jest

Question

Saya mempunyai komponen yang menggunakan swiper/react. Semasa menulis kes ujian, saya tidak dapat mensimulasikan peristiwa swiper yang diperoleh dalam onSlideChange. Saya tidak boleh melepasi syarat if dalam fungsi onSlideChangeHandler. Ada sesiapa boleh tolong? Terima kasih!

import { Swiper, SwiperSlide } daripada 'swiper/react';

eksport fungsi lalai Abcxyz(props: PropsType) {
...
...

  const onSlideChangeHandler = (swiper) =>
    const activeSlideIndex = swiper.activeIndex;
    slaid const = swiper.slides;
    if (slides[activeSlideIndex]?.id === 'hibrid printer bundle') {
      visibleConfigOptionsStore.setVisibleConfigOptions(
        slaid[activeSlideIndex].id
      );
    }
  };


  kembali (
    <Penyapu
      onSlideChange={(swiper) =>
    >
  )
}

Mencuba beberapa perkara tetapi tiada apa yang berjaya setakat ini.

Answer 1

Memandangkan anda tidak mahu menguji Swiper sendiri dan hanya ingin mengesahkan bahawa pengendali anda melaksanakan apabila onSlideChange dicetuskan, anda boleh mengikuti langkah berikut:

1. Mock Swiper supaya anda boleh menggunakan testId dan klik acara untuk mencetuskan onSlideChange

jest.mock('swiper/react', () => ({
  Swiper: ({ children, onSlideChange }: { children: React.ReactNode; onSlideChange: () => void }) => (
    <div data-testid="swiper" onClick={onSlideChange}>
      {children}
    </div>
  ),
}));

2. Sekarang cetuskan peristiwa dan buat sebarang penegasan dalam ujian anda:

fireEvent.click(screen.getByTestId('swiper'));