6

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:

export const Draggable: FC<DraggableInterface> = ({
  isDragging,
  setIsDragging,
  width,
  height,
  x,
  y,
  radius,
  children,
}) => {
  return (
      <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'
      >
        {children}
      </motion.div>
  );
};

And I have a snippet of the test as follows:

it('should drag the node to the new position', async () => {

    const DraggableItem = () => {
      const [isDragging, setIsDragging] = useState<boolean>(true);
      return (
          <Draggable
            isDragging={isDragging}
            setIsDragging={() => setIsDragging}
            x={0}
            y={0}
            onUpdateNodePosition={() => undefined}
            width={500}
            height={200}
          >
            <div
            style={{
                height: '32px',
                width: '32px'
            }}
            />
          </Draggable>
      );
    };

    const { rerender, getByTestId } = render(<DraggableItem />);
    rerender(<DraggableItem />);
    const draggableElement = getByTestId('dragabble-element');

    const { getByTestId, container } = render(
      <DraggableItem />
    );
    fireEvent.mouseDown(draggableElement);
    fireEvent.mouseMove(container, {
      clientX: 16,
      clientY: 16,
    })

    fireEvent.mouseUp(draggableElement)

    await waitFor(() =>
      expect(draggableElement).toHaveStyle(
        'transform: translateX(16px) translateY(16px) translateZ(0)',
      ),
    );

However, I cannot get the test to pass successfully as the transform value I test for is set to none. 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?

Any advice or guidance on how I can solve this would be greatly appreciated!

mineshmshah
  • 280
  • 1
  • 6
  • 15
  • I am not familiar with this library, but my first guess would be that it has something to do with a fact that elements rendered by jest does not have any size (height and width are 0). Even if you try to move mouse in a test, there is no real movement done, what might be necessary for the library to work. In your example you try to move mouse to point (16,16), but there is no point (16,16) - container has no size at all. Again, not sure this library works like this, but it would be something I would try first. – jjanczyk May 12 '20 at 21:02
  • hey! have you found a way to test this? – Borys Kupar Oct 20 '20 at 17:07
  • Hey, any update on this? – Madhav Thakker Apr 19 '21 at 13:59

1 Answers1

-2

Found this section in the react-testing-library docs

https://testing-library.com/docs/dom-testing-library/api-events/#fireeventeventname

Scroll down to the dataTransfer property section - apparently this is what we should be using to test drag-and-drop interactions

ao10
  • 1
  • 1