У меня есть некоторые компоненты 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?