Javascript 如何用Jest模拟数据传输

我有一些反应组件，我使用的

特别是，我在一个组件上收听

dragover

事件，并设置对象的x和y位置。然后，我监听不同组件上的

dragleave

事件，并从数据传输中检索x和y位置

我用Jest和酶来测试我的成分

如果我运行测试，会出现以下错误：

Test suite failed to run
ReferenceError: DataTransfer is not defined

据我所知，拖动界面是不可用的玩笑，所以我需要模拟它，并（也许？）使其通过

目前，我在我的

jest.config.js

中定义了

DataTransfer

，并将其作为一个全局解决方案，但我不确定这是否是最好的解决方案

class DataTransfer {
  constructor() {
    this.data = { dragX: "", dragY: "" };
    this.dropEffect = "none";
    this.effectAllowed = "all";
    this.files = [];
    this.img = "";
    this.items = [];
    this.types = [];
    this.xOffset = 0;
    this.yOffset = 0;
  }
  clearData() {
    this.data = {};
  }
  getData(format) {
    return this.data[format];
  }
  setData(format, data) {
    this.data[format] = data;
  }
  setDragImage(img, xOffset, yOffset) {
    this.img = img;
    this.xOffset = xOffset;
    this.yOffset = yOffset;
  }
}

const baseConfig = {
  globals: {
    DataTransfer: DataTransfer,
  },
  // other config...
};

module.exports = baseConfig;

---

开玩笑地模拟拖动界面的最佳方式是什么？

我正在使用以下自定义模型：

  // Arrange

  // Map as storage place
  const testStorage = new Map();

  // Mock of the drop Event
  const testEvent = {
      dataTransfer: {
        setData: (key, value) => testStorage.set(key, value),
        getData: (key) => testStorage.get(key)
      }
    };
    // remmeber to have 'and.callTrough()' to allow go trough the method
    spyOn(testEvent.dataTransfer, 'getData').and.callThrough();

    // Act
    // Add your code here

    // Assert
    expect(testEvent.dataTransfer.getData('YOUR_CHECKED_KEY')).toEqual('EXCPECTED_VALUE');

---

如果没有看到正在使用拖动接口的组件，很难说是肯定的，但是MDN文档确实声明：这个对象可以从所有拖动事件的dataTransfer属性中获得。注意，该对象称为dataTransfer（带有小写字母d）。拖放组件使用的是

dataTransfer

对象还是

dataTransfer

对象？