Tester Swiper avec Jest

Question

J'ai un composant qui utilise swiper/react. Lors de l'écriture du scénario de test, je ne parviens pas à simuler l'événement swiper obtenu dans onSlideChange. Je ne peux pas transmettre la condition if dans la fonction onSlideChangeHandler. Quelqu'un peut-il m'aider ? Merci!

importer { Swiper, SwiperSlide } depuis 'swiper/react';

fonction d'exportation par défaut Abcxyz(props: PropsType) {
...
...

  const onSlideChangeHandler = (glisseur) =>
    const activeSlideIndex = swiper.activeIndex;
    const slides = swiper.slides;
    if (slides[activeSlideIndex]?.id === 'package d'imprimante hybride') {
      visibleConfigOptionsStore.setVisibleConfigOptions(
        diapositives[activeSlideIndex].id
      );
    }
  } ;


  retour (
     onSlideChangeHandler(swiper)}
    >
  )
}
J'ai essayé plusieurs choses mais rien ne fonctionne jusqu'à présent. 

Answer 1

Puisque vous ne souhaitez pas tester Swiper lui-même et souhaitez simplement vérifier que votre gestionnaire s'exécute lorsque onSlideChange est déclenché, vous pouvez suivre ces étapes :

1. Mock Swiper pour que vous puissiez utiliser testId et cliquer sur l'événement pour déclencher onSlideChange

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

2. Déclenchez maintenant des événements et faites des assertions dans vos tests :

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