Trying to drag and drop with Cypress

[damien-monni]

Hi !

I would like to test my application with Cypress but I can't find a way to simulate a drag and drop. I tried to use the same mouseMoveBy command you created in draggable_spec.ts, but it has no effect on my application. Nothing seems to move.

I just have a basic drag and drop setup from the DndKit getting started documentation, nothing fancy. Did you have to setup something special to make it work with Cypress?

I'm not sure if I can use Cypress with Code Sandbox so I can link a reproductive example. I'll investigate.

Thank you

[clauderic]

@damien-monni the custom commands used for testing in Cypress can be found here: https://github.com/clauderic/dnd-kit/blob/master/cypress/support/commands.ts

Did you also add these in your Cypress support folder?

[damien-monni]

Yes I used the exact same commands

[damien-monni]

@clauderic I could not find a way to put an example online so I just created minimal repo reproducing the issue: https://github.com/damien-monni/dnd-kit-issue

To reproduce:

git clone git@github.com:damien-monni/dnd-kit-issue.git

cd dnd-kit-issue

npm install

npm start

npm run cypress:open

Launch the only test, you will see that nothing seems to be dragged and dropped.

[iguto]

hi, @damien-monni

I had similar issue and found a solution.
in your dnd-kit-issue repository, try this:

diff --git a/src/App.js b/src/App.js
index 0eee1ee..766a14c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,13 @@
-import { useDroppable, useDraggable, DndContext } from "@dnd-kit/core";
+import { useDroppable, useDraggable, DndContext, MouseSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { useState } from "react";

 const Draggable = () => {
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
     id: "draggable",
   });
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+  )

   return (
     <div style={{ display: "flex" }}>
@@ -62,9 +65,13 @@ const Root = ({ isDropped }) => {

 function App() {
   const [isDropped, setIsDropped] = useState(false);
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+  )

   return (
     <DndContext
+      sensors={sensors}
       onDragEnd={(event) => {
         if (event.over?.id) {
           setIsDropped(true);

It seems like MouseSensor is necessary. I hope this helps.

[damien-monni]

@iguto It's working! Thank you so much!

[clauderic]

Right. The MouseSensor is necessary because the commands trigger mouse events. If you would like to use the Pointer sensor, trigger pointer events instead (for example, pointerdown instead of mousedown)

[chestozo]

@damien-monni any luck with testing?
I am also trying to make them work with pointer events with no luck as of now.

[chestozo]

#437

[AriPerkkio]

Couple of years old issue but just in case others run into same issues with pointer events:

It's not just as simple as replacing mouse events with pointer ones. You'll also have to add couple of parameters to get through these checks:

dnd-kit/packages/core/src/sensors/pointer/PointerSensor.ts

Lines 37 to 39 in 694dcc2

	if (!event.isPrimary || event.button !== 0) {
	return false;
	}

This works with latest Cypress and dnd-kit:

cy.wrap(button)
    .trigger('pointerdown', {
        force: true,
        isPrimary: true,
        button: 0,
    })
    .wait(1_000)
    .trigger('pointermove', {
        clientX: 100,
        clientY: 100,
        force: true,
        isPrimary: true,
        button: 0,
    })
    .wait(1000)
    .trigger('pointerup', {
        force: true,
        isPrimary: true,
        button: 0,
    });