使用拖动事件、DataTransfer 和 Cypress JS

Question

我正在尝试使用 Cypress 在 React 应用程序上测试拖放功能。 我在手动测试期间监控了开发工具事件侦听器，可以看到 3 个拖动事件：dragenter、dragover 和 drop。 DragOver 包含项目和类型的 DataTransfer 信息。如果我不模拟 DT，那么在运行我的测试时这些值会丢失，所以我使用 Object.defineProperty 来添加它们。

const dataTransfer = new DataTransfer();

  Object.defineProperty(dataTransfer, 'items', {
    value: [{
      kind: 'string',
      type: 'pinnable_chart',
    }],
  });

  Object.defineProperty(dataTransfer, 'types', {
    value: ['pinnable_chart'],
  });

  cy.wrap(subject.get(0))
    .trigger('dragstart', 'center', {
      force: true,
      dataTransfer,
    })

  cy.wrap(target.get(0))
    .trigger('dragenter', 'topRight', {
      dataTransfer,
    })
    .trigger('dragover', 'topRight', {
      dataTransfer,
    })
    .trigger('drop', 'topRight', {
      force: true,
    });

  cy.wrap(subject.get(0)).trigger('dragend', 'center', {
    dataTransfer,
    force: true,
  });

我的代码没有发生任何拖放。在屏幕截图中，您将看到手动测试（左侧）和通过 Cypress 运行（右侧）之间的区别。

我缺少什么才能使这些拖动事件起作用？