Trying to drag and drop with Cypress

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

[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.

[chestozo]

https://github.com/clauderic/dnd-kit/pull/437