title: How to test mousemove drag and drop with react-testing-library and framer-motion
body: <p>I am trying to test the drag and drop functionality using react-testing-libary. The drag and drop functionality comes from framer-motion and the code is in reacy. From what I understand it uses the mousedown, mousemove and mouseup events to do this. I want to test drag and drop functionality of the following basic component:</p>
  
  <pre><code>export const Draggable: FC&lt;DraggableInterface&gt; = ({
    isDragging,
    setIsDragging,
    width,
    height,
    x,
    y,
    radius,
    children,
  }) =&gt; {
    return (
        &lt;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'
        &gt;
          {children}
        &lt;/motion.div&gt;
    );
  };
  </code></pre>
  
  <p>And I have a snippet of the test as follows:</p>
  
  <pre><code>it('should drag the node to the new position', async () =&gt; {
  
      const DraggableItem = () =&gt; {
        const [isDragging, setIsDragging] = useState&lt;boolean&gt;(true);
        return (
            &lt;Draggable
              isDragging={isDragging}
              setIsDragging={() =&gt; setIsDragging}
              x={0}
              y={0}
              onUpdateNodePosition={() =&gt; undefined}
              width={500}
              height={200}
            &gt;
              &lt;div
              style={{
                  height: '32px',
                  width: '32px'
              }}
              /&gt;
            &lt;/Draggable&gt;
        );
      };
  
      const { rerender, getByTestId } = render(&lt;DraggableItem /&gt;);
      rerender(&lt;DraggableItem /&gt;);
      const draggableElement = getByTestId('dragabble-element');
  
      const { getByTestId, container } = render(
        &lt;DraggableItem /&gt;
      );
      fireEvent.mouseDown(draggableElement);
      fireEvent.mouseMove(container, {
        clientX: 16,
        clientY: 16,
      })
  
      fireEvent.mouseUp(draggableElement)
  
      await waitFor(() =&gt;
        expect(draggableElement).toHaveStyle(
          'transform: translateX(16px) translateY(16px) translateZ(0)',
        ),
      );
  </code></pre>
  
  <p>However, I cannot get the test to pass successfully as the <code>transform</code> value I test for  is set to <code>none</code>. It does not update it the value with the updated CSS. I think there is some sort of async issue or animation delay so the mousemove is not detected and the value of the transform does not change. Would anyone know how to get the test to work or a way to test the mousemove changes?</p>
  
  <p>Any advice or guidance on how I can solve this would be greatly appreciated!</p>