如何使用Jest模拟DataTransfer

Question

我有一些React组件，在其中使用HTML拖放接口。

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

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

如果我运行我的测试，我会得到这个错误：

Test suite failed to run
ReferenceError: DataTransfer is not defined

据我所知，Jest 中没有 Drag 接口，因此我需要对其进行模拟并（或许？）通过 Jest 全局变量（Jest globals）使其可用。

目前，我在我的 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;

在Jest中模拟Drag接口的最佳方法是什么？

- jackdbd

---

没有看到使用拖拽界面的组件，很难说得准确，但是MDN文档确实指出：“此对象可以从所有拖动事件的dataTransfer属性中获得。”请注意该对象称为_dataTransfer_（小写 d）。你的拖放组件是否正在使用dataTransfer对象或DataTransfer对象？ - Sam Gomena

Answer 1

重要的是要知道，在这些情况下，您并不需要真正遵循“最佳”模拟API的方式，因为实际上并不存在这种方式。模拟API只是为脚本提供其执行所需的环境，以便它具有相关的输入和输出。如果您制作的模拟达到了其目的，那么就没有必要寻找更好的方法。

您正在为您的DataTransfer模拟创建一个类定义。这通常是我们制作模拟的方式。所以我猜你的解决方案是一个好的解决方案。

- Younes Henni

Answer 2

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

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

- Kacpers