Как издеваться над DataTransfer с помощью Jest - PullRequest
0 голосов
/ 25 февраля 2019

У меня есть некоторые компоненты React, в которых я использую HTML Drag интерфейс .

В частности, я слушаю dragover события на одном компоненте и устанавливаю позиции x и y с помощью DataTransfer объект.Затем я слушаю dragleave событий в другом компоненте и извлекаю позиции x и y из DataTransfer.

Я использую Jest и Enzyme для проверки своих компонентов.

Если я запускаюмои тесты я получаю эту ошибку:

Test suite failed to run
ReferenceError: DataTransfer is not defined

Насколько я понимаю, интерфейс перетаскивания недоступен в Jest, поэтому мне нужно смоделировать его и (возможно?) сделать его доступным через Jest globals.

Пока я определил DataTransfer в своем 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;

Как лучше всего издеваться над интерфейсом Drag в Jest?

...