使用Jest对Swiper进行测试
P粉805931281
P粉805931281 2023-08-31 22:35:14
[React讨论组]

我有一个组件,它使用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)}
    >
  )
}

尝试了一些方法,但目前没有任何效果。

P粉805931281
P粉805931281

全部回复(1)
P粉384679266

由于您不想测试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>
  ),
}));
  1. 现在在您的测试中触发事件并进行任何断言:
fireEvent.click(screen.getByTestId('swiper'));
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号