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