Testing Swiper with Jest

Question

I have a component that uses swiper/react. While writing the test case, I am unable to simulate the swiper event obtained in onSlideChange. I can't pass the if condition in the onSlideChangeHandler function. Can anyone help? Thanks!

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)}
    >
  )
}

Tried a few things but nothing is working so far.

Answer 1

Since you don't want to test Swiper itself and just want to verify that your handler executes when onSlideChange is triggered, you can follow these steps:

1. Mock Swiper so you can use testId and click events to trigger onSlideChange

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

2. Now trigger the event and make any assertions in your test:

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