使用Jest對Swiper進行測試

Question

我有一個元件，它使用swiper/react。 在編寫測試案例時，我無法模擬onSlideChange中取得的swiper事件。 我無法通過onSlideChangeHandler函數中的if條件。 有人可以幫忙嗎？謝謝！

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

export default function Abcxyz(props: PropsType) {
…
…

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


  return (
    <Swiper
      onSlideChange={(swiper) => onSlideChangeHandler(swiper)}
    >
  )
}

嘗試了一些方法，但目前沒有任何效果。

Answer 1

由於您不想測試Swiper本身，只想驗證當onSlideChange被觸發時，您的處理程序是否執行，您可以按照以下步驟進行：

1. 模擬Swiper，以便您可以使用testId和click事件來觸發onSlideChange

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

2. 現在在您的測試中觸發事件並進行任何斷言：

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