Swiper mit Jest testen

Question

Ich habe eine Komponente, die Swiper/React verwendet. Während ich den Testfall schreibe, kann ich das in onSlideChange erhaltene Swiper-Ereignis nicht simulieren. Ich kann die if-Bedingung in der Funktion onSlideChangeHandler nicht übergeben. Kann jemand helfen? Danke!

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

Standardfunktion exportieren Abcxyz(props: PropsType) {
...
...

  const onSlideChangeHandler = (swiper) =>
    const activeSlideIndex = swiper.activeIndex;
    const slides = swiper.slides;
    if (slides[activeSlideIndex]?.id === 'Hybriddruckerpaket') {
      sichtbarConfigOptionsStore.setVisibleConfigOptions(
        slides[activeSlideIndex].id
      );
    }
  };


  zurückkehren (
    <Swiper
      onSlideChange={(swiper) => onSlideChangeHandler(swiper)}
    >
  )
}

Ein paar Dinge ausprobiert, aber bisher hat nichts funktioniert.

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'));