如何在客户端 Javascript 中创建文件对象以进行单元测试？答案

【问题标题】：How to create File Object in client side Javascript for unit testing?如何在客户端 Javascript 中创建文件对象以进行单元测试？
【发布时间】：2016-12-15 13:02:47
【问题描述】：

我正在使用 mocha、chai、karma 以及 PhantomJS 和相关插件。我们如何创建客户端 File 对象以将其传递给 FileReader API？我必须上传一个测试 jpeg 文件，创建一个文件对象并将其传递给 FileReader api 以继续测试。

【问题讨论】：

@guest271314：我不认为这是重复的。这个问题是关于读/写本地文件的。这个问题是关于为测试目的对File 对象进行存根或模拟。我正在投票重新开放。
@GregBurghardt OP 询问如何创建 File 对象。另见Chrome: Create file input from blob with Javascript?
我同意 Greg Burghardt 的观点，这个问题确实是关于存根，但使用的是有效文件而不是一些包含值的数组。我想为一个有效的图像创建一个 File 对象。
@DeepanPrabhuBabu "我想创建一个 File 对象" 您可以使用 new File() 构造函数创建一个 File 对象，如链接问题的答案中所述；或FormData,prototype.append()How to create a modified copy of a File object in JavaScript?
@DeepanPrabhuBabu JavaScript - New File() not working

标签： javascript client-side-validation

【解决方案1】：

我不确定你为什么需要一个 File 实例，一个 Blob 就足够了。您需要向我们展示更多关于您想要实现的目标的背景信息。
您的代码在做什么以及预期会产生什么测试？

如果您可以访问 DOM 和画布，只需使用 js 创建一个

document.createElement('canvas').toBlob(function(blob) {
  // FileReader will be happy with just a blob
  // But if you really want a file you need to construct it also
  // var file = new File([blob], 'canvas.jpg', {type: blob.type})
  
  var fr = new FileReader
  fr.onload = function(){
    console.log(fr.result.byteLength)
  }
  fr.readAsArrayBuffer(blob)
}, 'image/jpeg')

【讨论】：

我正在编写的开发代码将在客户端浏览器上使用 javascript FileReader 验证文件，一旦他在表单中选择要上传的文件，然后再上传。基本上，我的设置由 npm、karma、mocha、chai、browserify、phantomjs 和 javascript 代码组成，用于在传递文件对象后验证文件。如果我使用香草浏览器并手动选择一个文件，该代码就可以工作。我想将其转换为自动化测试，我可以在其中参数化文件并传递不同的测试文件来测试代码流。如果您需要更多上下文，请告诉我。
我无法完全使用 phantomjs 进行测试，因为它不会触发大多数 onload 方法，而且，我使用您上面的代码创建的 blob 对象（谢谢！！）是空的。我使用了一个 polyfill，因为 phantomjs 本身不支持。
@DeepanPrabhuBabu "和用于验证文件的 javascript 代码，一旦文件对象被传递。如果我使用香草浏览器并手动选择文件，该代码就可以工作。我想转换这个进入自动化测试，我可以在其中参数化文件并传递不同的测试文件来测试代码流。" 您是否尝试使用javascript 填充<input type="file"> 元素的.files 对象？您能否在问题中包含javascript 和未返回预期结果的javascript？见stackoverflow.com/help/mcve、stackoverflow.com/help/how-to-ask