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

Question

我正在尝试使用react- test -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>
  );
};

我有一个测试片段，如下所示：

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更新它的值。我认为存在某种类型的异步问题或动画延迟，因此不会检测到鼠标移动，转换的值也不会改变。有没有人知道如何让测试工作，或者知道如何测试鼠标移动的变化？

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

Answer 1

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

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

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