如何使用 react-testing-library 和 framer-motion 测试 mousemove 拖放答案

【问题标题】：How to test mousemove drag and drop with react-testing-library and framer-motion如何使用 react-testing-library 和 framer-motion 测试 mousemove 拖放
【发布时间】：2020-08-28 11:44:41
【问题描述】：

我正在尝试使用 react-testing-libary 测试拖放功能。拖放功能来自 framer-motion，并且代码处于响应状态。据我了解，它使用 mousedown、mousemove 和 mouseup 事件来执行此操作。我想测试以下基本组件的拖放功能：

export const Draggable: FC<DraggableInterface> = ({
  isDragging,
  setIsDragging,
  width,
  height,
  x,
  y,
  radius,
  children,
}) => {
  return (
      <motion.div
        {...{ isDragging }}
        {...{ setIsDragging }}
        drag
        dragConstraints={{
          left: Number(`${0 - x}`),
          right: Number(
            `${width - x}`,
          ),
          top: Number(`${0 - y}`),
          bottom: Number(
            `${height - y}`,
          ),
        }}
        dragElastic={0}
        dragMomentum={false}
        data-test-id='dragabble-element'
      >
        {children}
      </motion.div>
  );
};

我有一个测试的sn-p如下：

it('should drag the node to the new position', async () => {

    const DraggableItem = () => {
      const [isDragging, setIsDragging] = useState<boolean>(true);
      return (
          <Draggable
            isDragging={isDragging}
            setIsDragging={() => setIsDragging}
            x={0}
            y={0}
            onUpdateNodePosition={() => undefined}
            width={500}
            height={200}
          >
            <div
            style={{
                height: '32px',
                width: '32px'
            }}
            />
          </Draggable>
      );
    };

    const { rerender, getByTestId } = render(<DraggableItem />);
    rerender(<DraggableItem />);
    const draggableElement = getByTestId('dragabble-element');

    const { getByTestId, container } = render(
      <DraggableItem />
    );
    fireEvent.mouseDown(draggableElement);
    fireEvent.mouseMove(container, {
      clientX: 16,
      clientY: 16,
    })

    fireEvent.mouseUp(draggableElement)

    await waitFor(() =>
      expect(draggableElement).toHaveStyle(
        'transform: translateX(16px) translateY(16px) translateZ(0)',
      ),
    );

但是，由于我测试的transform 值设置为none，因此我无法成功通过测试。它不会使用更新的 CSS 更新它的值。我认为存在某种异步问题或动画延迟，因此未检测到 mousemove 并且转换的值不会改变。有人知道如何让测试工作或测试 mousemove 更改的方法吗？

任何关于如何解决此问题的建议或指导将不胜感激！

【问题讨论】：

我不熟悉这个库，但我的第一个猜测是它与 jest 渲染的元素没有任何大小（高度和宽度为 0）的事实有关。即使您尝试在测试中移动鼠标，也没有完成真正的移动，这可能是库工作所必需的。在您的示例中，您尝试将鼠标移动到点 (16,16)，但没有点 (16,16) - 容器根本没有大小。同样，不确定这个库是这样工作的，但我会先尝试一下。
嘿！你找到了测试的方法吗？
嘿，这有什么更新吗？

标签： reactjs drag-and-drop mousemove react-testing-library framer-motion

【解决方案1】：

在 react-testing-library 文档中找到此部分

https://testing-library.com/docs/dom-testing-library/api-events/#fireeventeventname

向下滚动到 dataTransfer 属性部分 - 显然这是我们应该用来测试拖放交互的内容

【讨论】：