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

Posted 2023-02-21

【中文标题】如何使用 react-testing-library 和 framer-motion 测试 mousemove 拖放

【英文标题】：How to test mousemove drag and drop with react-testing-library and framer-motion

【发布时间】：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) - 容器根本没有大小。同样，不确定这个库是这样工作的，但我会先尝试一下。

嘿！你找到了测试的方法吗？

嘿，这有什么更新吗？

【参考方案1】：

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

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

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