在 TypeScript 中模拟拖动事件的 dataTransfer答案

【问题标题】：Simulate dataTransfer for drag events in TypeScript在 TypeScript 中模拟拖动事件的 dataTransfer
【发布时间】：2017-07-14 04:14:28
【问题描述】：

我正在为依赖于事件的dataTransfer 的拖放交互编写单元测试。我也在使用打字稿。为了模拟事件，我编写了这个小函数：

function createDragEvent(eventName: string, dataTransferData?: Array<any>) {
    const event = new CustomEvent(eventName, { bubbles: true, cancelable: true });
    event.dataTransfer = {
        setData: jasmine.createSpy("setData() spy"),
        getData: jasmine.createSpy("getData() spy").and.callFake(function() {
            return dataTransferData[0] === 'text/plain' ? dataTransferData[1] : undefined;
        })
    };
    return event;
}

但是，TypeScript 告诉我

TS2339：“CustomEvent”类型上不存在属性“dataTransfer”。

我不能不使用dataTransfer，也不能使用本机DragEvents，因为我无法设置数据或窥探其功能。有没有办法解决这个问题，例如告诉 TypeScript dataTransfer 没问题或禁用此文件的错误或类似的东西？

【问题讨论】：

标签： unit-testing typescript drag-and-drop

【解决方案1】：

你能做这样的事情吗？

const event: CustomEvent & { dataTransfer?: DataTransfer } =
    new CustomEvent(eventName, { bubbles: true, cancelable: true });

【讨论】：

是的！谢谢！最后我不得不做CustomEvent & { dataTransfer?: any }，但你的方法奏效了！

【解决方案2】：

如果有人像我一样来到这里，因为 TypeScript 中的 Event 对象没有 dataTransfer 属性：

只需改用DragEvent。

【讨论】：

不幸的是，当我尝试访问 DragEvent 时收到 undefined 错误。使用@libertyernie 的答案，我至少能够创建一个符合我目的的事件参数。
我还能够使用sinon JS 来存根jsdom 提供的DragEvent interface。例如const fakeEvent = sinon.stubInterface<DragEvent>();

【解决方案3】：

如果您像我一样无法使用CustomEvent 解决方案，因为您的函数需要DragEvent，以下对我有用：

    const dragEvent = new DragEvent('test')
    const mockEvent = {
        ...dragEvent,
        dataTransfer: new DataTransfer()
    } as DragEvent

【讨论】：