Angular 单元测试文件上传输入 - DataTransfer 未定义

Question

尝试为文件上传输入元素编写 Jest 单元测试。

根据我在网上找到的内容，我尝试通过以编程方式设置输入元素上的文件属性来模拟选择文件，如下所示：

  function selectFile(inputElement: HTMLInputElement) {
    const dataTransfer = new DataTransfer();
    const mockFile = new File(['Hello World'], 'test-file.txt');
    dataTransfer.items.add(mockFile);
    inputElement.files = dataTransfer.files;
    inputElement.dispatchEvent(new InputEvent('change'));
    return fixture.whenStable();
  }

但是我刚刚收到“DataTransfer 未定义”的错误。

我在这里缺少什么吗？为什么 DataTransfer 未定义？或者我还应该如何使用 Jest 来模拟选择用于单元测试的文件？

这是我找到的post供参考。 Here 是其他人使用 Jest 并遇到同样问题的帖子。但事件没有得到任何解决就结束了。

Answer 1

您需要使用polyfill进行数据传输https://atlassian.design/components/pragmatic-drag-and-drop/optional-packages/unit-testing/about。

如果您遇到类似错误：无法在“HTMLInputElement”上设置“文件”属性：提供的值不是“FileList”类型对于

inputElement.files = dataTransfer.files

，您可以使用下一个解决方法：

Object.defineProperty(input, 'files', {
            value: dataTransfer.files,
            writable: false
        });