使用jest(testing-library)测试dnd-kit拖拽功能失败如何解决

核心问题 #

• 事件类型不匹配：dnd-kit 默认基于 Pointer 事件实现拖拽逻辑，并未监听原生 HTML5 拖拽对应的 dragStart、drop 事件，你当前触发的事件无法被 dnd-kit 捕获。
• 事件流程不完整：完整的拖拽流程需要包含「按下拖拽元素→移动到放置区域→松开」三个核心阶段，仅触发两个事件无法走完 dnd-kit 的内部状态流转。
• 元素查询逻辑问题：queryByTestId 匹配不到元素时会返回 null 不会抛出错误，无法第一时间定位元素未渲染的问题。

修复代码 #

import { waitFor, fireEvent } from '@testing-library/react';

it.only("should pass the pack in the activatedPack zone by drag and drop", async () => {
    const ui = (
        <AppWrapper
            routeParams={{
                id: "602fdec72b21c534fc8ca136",
            }}
            useQueryResponses={{
                "user|602fdec72b21c534fc8ca136|availablePacks": {
                    data: mockDataAvailable,
                    isSuccess: true,
                },
            }}
        >
            <Packs />
        </AppWrapper>
    );

    const { getByTestId } = render(ui);
    // 等待组件和数据加载完成，确保元素已挂载
    await waitFor(() => {
        expect(getByTestId("draggableItem_6137129fb0337106e08680fd")).toBeInTheDocument();
        expect(getByTestId("activatedPacks")).toBeInTheDocument();
    })

    const draggableItem = getByTestId("draggableItem_6137129fb0337106e08680fd");
    const dropZone = getByTestId("activatedPacks");
    const dropZoneCenterX = dropZone.getBoundingClientRect().left + dropZone.getBoundingClientRect().width / 2;
    const dropZoneCenterY = dropZone.getBoundingClientRect().top + dropZone.getBoundingClientRect().height / 2;

    // 触发完整指针拖拽流程
    fireEvent.pointerDown(draggableItem, { clientX: 0, clientY: 0, pointerId: 1 });
    fireEvent.pointerMove(document, { clientX: 10, clientY: 10, pointerId: 1 });
    fireEvent.pointerMove(document, { clientX: dropZoneCenterX, clientY: dropZoneCenterY, pointerId: 1 });
    fireEvent.pointerUp(document, { pointerId: 1 });

    // 补充业务断言，验证拖拽结果符合预期
    // 示例：expect(getByTestId('activatedPacks').children).toContainElement(draggableItem)
});

注意事项 #

• 必须补充对应业务断言，仅触发事件无法验证功能是否正常执行。
• 上述方案仅适配指针设备拖拽场景，如果你用到了dnd-kit的键盘拖拽能力，需要单独触发键盘事件流程。

内容的提问来源于stack exchange，提问作者MohLsl87