reactjs - 如何在 RTL 中测试轮播？

Question

我想在 React-testing-library 中测试轮播。

我无法检查 RTL 中的状态是否像酶一样发生变化，所以......

我所做的只是给 carousel 一个 scrollX 并检查它是否已更改

fireEvent.scroll(element, { target: { scrollX: 100 } });
// check
element.scrollLeft...

它是收集还是任何想法？

import React, { useRef } from "react";
import "./Carousel.css";

export interface CarouselProps {
  children: React.ReactNode;
}

const Carousel = ({ children }: CarouselProps) => {
  const carouselRef = useRef<HTMLDivElement>(null);
  let isDown = false;
  let startX = 0;
  let scrollLeft = 0;

  const onMouseDownCarousel: React.MouseEventHandler<HTMLDivElement> = (e) => {
    if (!carouselRef || !carouselRef.current) {
      return;
    }
    isDown = true;
    carouselRef.current.classList.add("active");
    startX = e.pageX - carouselRef.current.offsetLeft;
    scrollLeft = carouselRef.current.scrollLeft;
  };

  const onMouseLeaveCarousel: React.MouseEventHandler<HTMLDivElement> = (e) => {
    if (!carouselRef || !carouselRef.current) {
      return;
    }
    isDown = false;
    carouselRef.current.classList.remove("active");
  };

  const onMouseUpCarousel: React.MouseEventHandler<HTMLDivElement> = (e) => {
    if (!carouselRef || !carouselRef.current) {
      return;
    }
    isDown = false;
    carouselRef.current.classList.remove("active");
  };

  const onMouseMoveCarousel: React.MouseEventHandler<HTMLDivElement> = (e) => {
    if (!carouselRef || !carouselRef.current) {
      return;
    }
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - carouselRef.current.offsetLeft;
    const walk = (x - startX) * 3;
    carouselRef.current.scrollLeft = scrollLeft - walk;
  };

  return (
    <div
      className="carousel"
      onMouseDown={onMouseDownCarousel}
      onMouseLeave={onMouseLeaveCarousel}
      onMouseUp={onMouseUpCarousel}
      onMouseMove={onMouseMoveCarousel}
      ref={carouselRef}
    >
      {children}
    </div>
  );
};

export default Carousel;

标签： reactjsreact-testing-library