IT技术 - 如何用 Jest 模拟 DataTransfer - 吾爱随笔录

我有一些 React 组件，我在其中使用了HTML Drag interface。

特别是，我侦听dragover一个组件上的事件并使用DataTransfer对象设置 x 和 y 位置。然后，我侦听dragleave不同组件上的事件并从 DataTransfer 中检索 x 和 y 位置。

我正在使用 Jest 和 Enzyme 来测试我的组件。

如果我运行我的测试，我会收到此错误：

Test suite failed to run
ReferenceError: DataTransfer is not defined

据我了解，Drag 界面在 Jest 中不可用，所以我需要模拟它并（也许？）通过Jest globals使其可用。

现在我DataTransfer在 my 中定义jest.config.js并将其设为全局，但我不确定这是否是最佳解决方案。

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;

在 Jest 中模拟 Drag 界面的最佳方法是什么？

// 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');