如何使用 Cypress 在 React App 中拖放？

如何解决如何使用 Cypress 在 React App 中拖放？

我无法使用 Cypress 拖放 div 元素。我正在使用这个自定义命令：

Cypress.Commands.add('drag',{
    prevSubject: 'element',},(sourceSelector,targetSelector) => {
    function DndSimulatorDataTransfer() {
        this.data = {}
    }

    DndSimulatorDataTransfer.prototype.dropEffect = "move"
    DndSimulatorDataTransfer.prototype.effectAllowed = "all"
    DndSimulatorDataTransfer.prototype.files = []
    DndSimulatorDataTransfer.prototype.items = []
    DndSimulatorDataTransfer.prototype.types = []

    DndSimulatorDataTransfer.prototype.clearData = function (format) {
        if (format) {
            delete this.data[format]

            const index = this.types.indexOf(format)
            delete this.types[index]
            delete this.data[index]
        } else {
            this.data = {}
        }
    }

    DndSimulatorDataTransfer.prototype.setData = function (format,data) {
        this.data[format] = data
        this.items.push(data)
        this.types.push(format)
    }

    DndSimulatorDataTransfer.prototype.getData = function (format) {
        if (format in this.data) {
            return this.data[format]
        }

        return ""
    }
    const dataTransfer = new DndSimulatorDataTransfer()

    cy.wrap(sourceSelector.get(0))
        .trigger('mousedown',{which: 1})
        .trigger('dragstart',{dataTransfer})
        .trigger('drag',{})

    cy.get(targetSelector)
        .trigger('dragover',{dataTransfer})
        .trigger('drop',{dataTransfer})
        .trigger('dragend',{dataTransfer})
        .trigger('mouseup',{which: 1})
});

当我使用这个命令时，我的元素被拖到了正确的位置，但是当它被放下时它被放到了之前的位置 - Loom video link