Testing svelte-dnd-action with Cypress

Using Drag & Drop is probably easier than ever due to virtually unlimited supply of new front-end libraries appearing every day. Making Drag & Drop for a sortable trello-like boards or for file uploads work in the browser is thus becoming a matter of importing a module and writing at most a few lines, maybe sprinkling a configuration option here and there.

Doing automated testing on the stuff however is still not kind of there yet, I would say, as I have spent a day trying to figure out how to write a Cypress test snippet for the Drag & Drop functionality offered by the awesome svelte-dnd-action library.

After sieving through dozens of StackOverflow posts and even trying every solution in this lengthy thread I have finally found a possible way forward in this SO answer. The asnwer does not provide the full solution, but instead a hint to trigger the mousemove even twice in a row. Here a Cypress test snippet that works for me:

const clientX = 300
const clientY = 500
const force = true

cy.get("[data-cy=draggable]")
  .trigger("mousedown")
  .trigger("mousemove", { clientX, clientY, force })
  .trigger("mousemove", { clientX, clientY, force })
  .wait(1)
  .trigger("mouseup", { force })

Also it did not work for me if I omitted that wait(1) for the reasons I definitelo do not comprehend right now. Also, make sure to not use the Svelte version 3.38.3 for this, due to a bug.