如何使用 react-testing-library 和 framer-motion 测试鼠标移动拖放

Question

我正在尝试使用 react-testing-libary 测试拖放功能。拖放功能来自 framer-motion 并且代码在 reacy 中。据我了解，它使用 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>
  );
};

我有一个测试片段如下：

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 更改的方法？

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

Answer 1

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

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

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