使用Jest对Swiper进行测试
P粉805931281
2023-08-31 22:35:14
<p>我有一个组件，它使用swiper/react。
在编写测试用例时，我无法模拟onSlideChange中获取的swiper事件。
我无法通过onSlideChangeHandler函数中的if条件。
有人可以帮忙吗？谢谢！</p>
<pre class="brush:php;toolbar:false;">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)}
>
)
}</pre>
<p>尝试了一些方法，但目前没有任何效果。</p>
由于您不想测试Swiper本身，只想验证当onSlideChange被触发时，您的处理程序是否执行，您可以按照以下步骤进行：
jest.mock('swiper/react', () => ({ Swiper: ({ children, onSlideChange }: { children: React.ReactNode; onSlideChange: () => void }) => ( <div data-testid="swiper" onClick={onSlideChange}> {children} </div> ), }));fireEvent.click(screen.getByTestId('swiper'));