React/Jest拖拽组件测试失败：dataTransfer数据无法获取如何解决？

AI 小北

2026-8-8

解决拖拽测试中drop事件无数据的问题

你的测试失败核心原因是mock dataTransfer的方式错误，以及断言逻辑与实际代码行为不匹配，以下是具体修复方案：

问题分析

dragStart事件中，你直接将setData赋值为字符串"test"，但它应该是一个能保存数据的函数
drop事件未传递包含getData方法的dataTransfer对象，无法获取拖拽时设置的数据
断言的droppableElement.dataTransfer不存在——实际代码是通过drop事件的dataTransfer获取数据，再移动DOM元素

修复后的测试代码

import { render, screen, fireEvent } from "@testing-library/react";
import App from "./App";

test("Tests drag and drop of first component", () => {
  render(<App />);
  
  const draggableElement = screen.getByTestId("draggable-component");
  const droppableElement = screen.getByTestId("drop-zone");

  // 模拟真实dataTransfer的行为，保存拖拽数据
  const mockDataTransfer = {
    data: {},
    setData(type, value) {
      this.data[type] = value;
    },
    getData(type) {
      return this.data[type];
    }
  };

  // 触发dragStart，传递正确的mock dataTransfer
  fireEvent.dragStart(draggableElement, {
    dataTransfer: mockDataTransfer
  });
  // 触发drop，复用同一个mock dataTransfer以保证数据传递
  fireEvent.drop(droppableElement, {
    dataTransfer: mockDataTransfer
  });

  // 断言：拖拽元素已被添加到drop区域中
  expect(droppableElement).toContainElement(draggableElement);
  // 可选：断言drop区域包含拖拽元素的文本内容
  expect(droppableElement).toHaveTextContent("Drag Me to the grey component");
});