Testing drag and drop in framer motion using cypress.

[jamesvec]

I am using a reorder group in my project and I am trying to use drag and drop in cypress to reorder the elements in my tests. Has anyone had any luck getting this to work? I have tried a few different libs plus the built in cypress drag events with no luck. Any help would be greatly appreciated.

[jamesvec]

Leaving this here for anyone who needs to do this.

cy.get('[data-cy=drag-target]')
  .eq(0)
  .then(($el) => {
    const el = $el[0];
    const rect = el.getBoundingClientRect();
    cy.wrap($el).trigger('pointerdown', {
      clientX: rect.left + rect.width / 2,
      clientY: rect.top + rect.height / 2,
      button: 0,
    });
  });

cy.get('[data-cy=drag-target]')
  .eq(1)
  .then(($el) => {
    const el = $el[0];
    const rect = el.getBoundingClientRect();
    cy.wrap($el).trigger('pointermove', {
      clientX: rect.left + rect.width / 2,
      clientY: rect.top + rect.height / 2,
      button: 0,
    });
    cy.wrap($el).trigger('pointerup', {
      clientX: rect.left + rect.width / 2,
      clientY: rect.top + rect.height / 2,
      button: 0,
    });
  });

[joaopslins]

Thanks @jamesvec for sharing your solution here. I had the same issue and this post helped to figure out how to make it work.
I'm using Storybook interaction testing though, so I had to change the syntax a little bit. I'll leave my solution here too in case someone finds this in the future.

import { fireEvent } from "storybook/test";

export const reorderItems = async (
  source: HTMLElement,
  target: HTMLElement,
) => {
  const sourceRect = source.getBoundingClientRect();
  const targetRect = target.getBoundingClientRect();

  const startX = sourceRect.left + sourceRect.width / 2;
  const startY = sourceRect.top + sourceRect.height / 2;

  const endX = targetRect.left + targetRect.width / 2;
  const endY = targetRect.top + targetRect.height / 2;

  await fireEvent.pointerDown(source, {
    clientX: startX,
    clientY: startY,
    isPrimary: true,
  });
  // Sleep is needed between the actions since Framer motion has a concept of velocity to determine dragging
  await sleep(30);

  await fireEvent.pointerMove(source, {
    clientX: endX,
    clientY: endY,
    isPrimary: true,
  });
  await sleep(30);

  await fireEvent.pointerUp(source, {
    clientX: endX,
    clientY: endY,
    isPrimary: true,
  });
};