如何模拟酶测试用例中的拖放？

Posted 2023-05-08

【中文标题】如何模拟酶测试用例中的拖放？

【英文标题】：How do I simulate drag and drop in enzyme testcase?

【发布时间】：2018-04-26 15:23:28

【问题描述】：

我正在尝试创建一个测试来模拟将图像拖动到 div 中。我对如何实现这一点一无所知。非常感谢任何帮助。

it('test drag and drop', () => 
    const app = mount(<App />);
    const loco = app.find('.app img');
    const dropTarget = app.find('.drop-target');
    let mockEvent =  dataTransfer:  type: 'test'  ;
    loco.simulate('drag', mockEvent);
    //loco.simulate('dragover', dropTarget, mockEvent);
    //loco.simulate('drop', dropTarget, mockEvent);
);

我正在尝试模拟 drop 事件，不知道该怎么做，因为它涉及到 2 个元素。

谢谢， 沙特

【参考方案1】：

您使用什么 DnD 组件？反应-Dnd？ 也许 Github 上的 this issue 可以帮助你。 或者 this article 关于通过 Jest 测试拖放。

【讨论】：

我没有使用 React-Dnd，而是使用纯 JS 事件进行拖放。我浏览了您分享的文章。它使用 ReactTestUtils 而不是酶