Jsdom: FileListにファイルを追加するいくつかのメソッドを公開します

input.files = createFileList(file1, file2, ...)がいいでしょう。

@cpojerそこに入れる実際のFileオブジェクトを生成していますか？

input.files書き込み可能にするのはおそらく悪いことです。おそらく、生の配列を返して自分で埋めるか、 fillFileList(input.files, [file])ようなことをすることができます。

実際にはモックデータのみを使用するため、 .filesにオブジェクトの配列を入力します。 しかし、それをFileオブジェクトである必要があるのは、合理的だと思います。

ここではdefinePropertyで問題ないようです。 DOMプロパティは次の理由で再構成可能です...

ただし、実際のデータを使用して実際のFileListを作成したいと思います。

配列インデックスを使用してFileListアイテムにアクセスすることも可能である必要があります。 .itemは、フィールドにアクセスする唯一の方法ではありません。

OK、それでいくつかの潜在的な問題があるように聞こえます：

• FileListにインデックス付きアクセスが正しく機能しない（バグ）
• テスト用のFileListオブジェクトを作成する方法はありません（Webプラットフォームの機能のギャップ）。

ただし、inputEl.filesの変更は問題ではありません。

ええ、エンジニアに通常の割り当てでObject.definePropertyを使用するように指示するのは素晴らしいことではありませんが、私はそれと一緒に暮らすことができます。

まあ、とにかく実際のブラウザでそれをしなければならないので、それは私には合理的だと思います...

こんにちは、これは1年以上前のものだと思いますが、この問題に関して何か進展があったかどうか尋ねたいと思います。 Jestフレームワークを使用して、内部でjsdomを使用するReact / Reduxアプリをテストします。 1つ以上のFileオブジェクトを使用してFileListを動的に作成する必要があるという問題があります。

lib / jsdom / living / filelist.jsを見ると、FileListのコンストラクターがあることがわかりますが、ファイルを渡すオプションはありません。 FileListとFileにはセキュリティ上の理由から仕様に従ったコンストラクターがないことは理解していますが、コンストラクターがFileオブジェクトの配列、または少なくともFileを追加できる追加のメソッド（たとえば_setItem_）を受け入れることを許可する意図はありますか？特にテスト目的でオブジェクトをリストに追加しますか？

FileListに関するもう1つの問題もあります。 誤解しない限り、NodeList（lib / jsdom / living / node-list.js）と同じように、配列のようなオブジェクトである必要があります。つまり、次の2つの方法でFileオブジェクトにアクセスできる可能性があります。

var fileList = document.getElementById("myfileinput").files;

fileList[0];
fileList.item(0);

現在、アクセスはメソッドを介してのみ可能です。 これは、NodeListと同じロジックをここに適用する必要があることを意味します。

FileList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

ファイルの配列をコンストラクターに渡すことを許可する場合、ファイルは次のように格納する必要があります。

for (let i = 0; i < files.length; ++i) {
  this[i] = files[i];
}

これをどのように行うべきかについて強い意見はありません。これらは、私が指摘しようとしていることをよりよく説明するために使用する単なる例です。

追加の質問（ここで質問する前に不要な問題を開きたくない）：

1.）文字列として提供されたパスを使用して実際のファイルからFileオブジェクトを作成する、テスト目的でFileコンストラクターを追加することは有益でしょうか？ これを許可するライブラリを見つけました（申し訳ありませんが、リンクが見つかりません）：

const file = new File('../fixtures/files/test-image.png');

これにより、手動で作成しなくても、プロパティ（size、lastModified、type ...）を使用してファイルが作成されました。

const file = new File([''], 'test-image.png', {
  lastModified: 1449505890000,
  lastModifiedDate: new Date(1449505890000),
  name: "ecp-logo.png",
  size: 44320,
  type: "image/png",
});

このライブラリがどのように機能したかはわかりませんが、1年以上メンテナンスされておらず、使用をやめました。 もう見つからないようです。

2.）window.URL.createObjectURLはjsdomではサポートされていません。 報告すべきかどうかわからない。

jsdomライブラリコードを変更せずにFileListを作成できました。

const createFile = (size = 44320, name = 'ecp-logo.png', type = 'image/png') =>
  new File([new ArrayBuffer(size)], name , {
    type: type,
  });

const createFileList = (file) => {
  const fileList = new FileList();
  fileList[0] = file;
  return fileList;
}

const fileList = createFileList(createFile());

この場合、jsdomが提供するFileListでコンストラクターを呼び出すFileListオブジェクトを作成しています。 その後、配列表記を使用してそのリストにファイルを追加します。 私の場合、配列に必要なファイルは1つだけですが、これをforループに変更して、FileListに複数のファイルを追加することもできます。 jsdomが提供するFileコンストラクターを使用して、カスタムの名前/タイプ/サイズでファイルを作成しています。この機能は仕様に従っています。

これは、jsdom環境でFileListをモックする方法を探している人には役立つかもしれませんが、1つの問題がまだ残っています。 このメソッドを使用してファイルの配列を使用してFileListを作成すると、FileList.item（index）メソッドを使用して配列からアイテムを取得することはできません。 しかし、それでも、次のようなメソッドをオーバーライドすることで修正できます。

const createFileList = (file) => {
  const fileList = new FileList();
  fileList[0] = file;
  fileList.item = index => fileList[index]; // override method functionality
  return fileList;
}

jsdomがこれらの機能をテスト目的ですぐに提供できれば、それでも良いと思います。

こんにちは、みんな 、
FileListを返す$（ "＃selectorID of Upload file"）[0] .files [0]オブジェクトをモックしているときに、いくつかの問題に直面しています。
誰かがFileListオブジェクトの作成を手伝ってくれますか？ WWWのどこにも参照リンクが見つからないため

現在はできません。

Domenicに感謝します。

ファイルアップロード変更イベントのテストケースを作成する必要があります。 そのテストシナリオを実行する別の方法。

これについて何か進展はありますか？

https://mobile.twitter.com/slicknet/status/782274190451671040

@niksajanjicこのスレッドで提示された最良のソリューションを実装することに
参照： const file = new File('../fixtures/files/test-image.png');
またはそれに似たもの？
一番

@domenicこの問題に関するTwitterの投稿には少し異議があるようです

@domenicわかりました、これの基本的なスタートを設定しました。 すべてのチェックがそこにあるわけではありませんが、それは本質的に@niksajanjicが話していたものです。

createFile

function createFile(file_path) {
  const { mtimeMs: lastModified, size } = fs.statSync(file_path)

  return new File(
    [new fs.readFileSync(file_path)],
    path.basename(file_path),
    {
      lastModified,
      type: mime.lookup(file_path) || '',
    }
  )
}

addFileList

function addFileList(input, file_paths) {
  if (typeof file_paths === 'string')
    file_paths = [file_paths]
  else if (!Array.isArray(file_paths)) {
    throw new Error('file_paths needs to be a file path string or an Array of file path strings')
  }

  const file_list = file_paths.map(fp => createFile(fp))
  file_list.__proto__ = Object.create(FileList.prototype)

  Object.defineProperty(input, 'files', {
    value: file_list,
    writeable: false,
  })

  return input
}

デモファイル

/*eslint-disable no-console, no-unused-vars */

/*
https://github.com/jsdom/jsdom/issues/1272
*/

const fs = require('fs')
const path = require('path')
const mime = require('mime-types')

const { JSDOM } = require('jsdom')
const dom = new JSDOM(`
<!DOCTYPE html>
<body>
  <input type="file">
</body>
`)

const { window } = dom
const { document, File, FileList } = window


const file_paths = [
  '/Users/williamrusnack/Documents/form_database/test/try-input-file.html',
  '/Users/williamrusnack/Documents/form_database/test/try-jsdom-input-file.js',
]

function createFile(file_path) {
  const { mtimeMs: lastModified, size } = fs.statSync(file_path)

  return new File(
    [new fs.readFileSync(file_path)],
    path.basename(file_path),
    {
      lastModified,
      type: mime.lookup(file_path) || '',
    }
  )
}

function addFileList(input, file_paths) {
  if (typeof file_paths === 'string')
    file_paths = [file_paths]
  else if (!Array.isArray(file_paths)) {
    throw new Error('file_paths needs to be a file path string or an Array of file path strings')
  }

  const file_list = file_paths.map(fp => createFile(fp))
  file_list.__proto__ = Object.create(FileList.prototype)

  Object.defineProperty(input, 'files', {
    value: file_list,
    writeable: false,
  })

  return input
}



const input = document.querySelector('input')

addFileList(input, file_paths)

for (let i = 0; i < input.files.length; ++i) {
  const file = input.files[i]
  console.log('file', file)
  console.log('file.name', file.name)
  console.log('file.size', file.size)
  console.log('file.type', file.type)
  console.log('file.lastModified', file.lastModified)
  console.log()
}

@BebeSparkelSparkel後の投稿で説明した方法でテストを行いました。 残念ながら、数か月後、同僚の1人がそのコードをコピーしようとしたときに、新しいバージョンのjsdomでの作業が停止しました。 そのため、その時点でFileListのテストをコメントアウトする必要がありました。 そこから、私たちはそれらのテストを書く方法を見つけることができず、過去数ヶ月間、誰もそれをも​​う一度見て、方法を見つけることを試みる時間がありませんでした。

@niksajanjic更新していただきありがとうございます。 私はあなたが提案したソリューションに取り組んでおり、それは機能しているようです（上記のコードを参照）が、追加方法を理解するのは非常に難しいため、jsdomに追加される可能性は低いと思います。
必要に応じて、お気軽にご覧になり、ご利用ください。

jsdomプロジェクトが解決策を見つけるまで、この問題を解決する簡単なヘルパースクリプトを作成しました。
https://bitbucket.org/william_rusnack/addfilelist/src/master/

1つのファイルを追加します。

const input = document.querySelector('input[type=file]')
addFileList(input, 'path/to/file')

複数のファイルを追加します。

const input = document.querySelector('input[type=file]')
addFileList(input, [
  'path/to/file',
  'path/to/another/file',
  // add as many as you want
])

インストールして必要

npm install https://github.com/BebeSparkelSparkel/addFileList.git

`` `javascript
const {addFileList} = require（ 'addFileList'）

## Functions
**addFileList**(input, file_paths)  
Effects: puts the file_paths as File object into input.files as a FileList  
Returns: input  
Arguments:  
- input: HTML input element  
- file_paths: String or Array of string file paths to put in input.files  
`const { addFileList } = require('addFileList')`  

## Example
Extract from example.js
```javascript
// add a single file
addFileList(input, 'example.js')

// log input's FileList
console.log(input.files)

// log file properties
const [ file ] = input.files
console.log(file)
console.log(
  '\nlastModified', file.lastModified,
  '\nname', file.name,
  '\nsize', file.size,
  '\ntype', file.type,
  '\n'
)

結果

$ node example.js 
FileList [ File {} ]
File {}

lastModified 1518523506000 
name example.js 
size 647 
type application/javascript 

@BebeSparkelSparkelあなたのリポジトリは削除されたようですか？

@TheCycoONE https://bitbucket.org/william_rusnack/addfilelist/src/master/

同様の問題がありました。入力としてFileListを受け取る関数を作成し、jestを使用してその単体テストを作成したいと考えました。 以下のヘルパー関数を使用して、関数を操作するのに十分なFileListオブジェクトをスプーフィングすることができました。 構文は、フロー注釈付きのES6です。 実際のFileListクラスの機能を偽造しているだけなので、すべての状況で機能するという約束はありません…

const createFileList = (files: Array<File>): FileList => {
  return {
    length: files.length,
    item: (index: number) => files[index],
    * [Symbol.iterator]() {
      for (let i = 0; i < files.length; i++) {
        yield files[i];
      }
    },
    ...files,
  };
};

フロントエンドでは、次のようなことを実行して、「実際の」 FileList構築できます。

export const makeFileList = files => {
  const reducer = (dataTransfer, file) => {
    dataTransfer.items.add(file)
    return dataTransfer
  }

  return files.reduce(reducer, new DataTransfer()).files
}

参照： https ：

残念ながら、 jsdomは実際にDataTransferまだ

• https://github.com/jsdom/jsdom/issues/1568

その他の参考文献：

• https://github.com/whatwg/html/issues/3269
• https://stackoverflow.com/questions/47119426/how-to-set-file-objects-and-length-property-at-filelist-object-where-the-files-a/47172409#47172409
• https://developer.mozilla.org/en-US/docs/Web/API/FileList
• https://w3c.github.io/FileAPI/#filelist -section

ソースを少し検索すると、 exports.FileList = require("./generated/FileList").interface;見つかりました

• https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/index.js#L62

〜しかし、GitHubからは、最終的に./generated構築するソースをどこで見つけるかが明確ではありません

• これが関連する場所のようです： https ：
  
  
  
  • yarn prepare ： https ：
  
  
  • yarn convert-idl ： https ：
  
  
  • https://github.com/jsdom/jsdom/blob/master/scripts/webidl/convert.js#L26
  
  
• https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/file-api/FileList.webidl
• https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/file-api/FileList-impl.js

npmパッケージの主なエクスポートは./lib/api.jsで、非常に小さなパブリックAPIをエクスポートします。

exports.JSDOM = JSDOM;
exports.VirtualConsole = VirtualConsole;
exports.CookieJar = CookieJar;
exports.ResourceLoader = ResourceLoader;
exports.toughCookie = toughCookie;

しかし、私の./node_modules/jsdom/lib/jsdomディレクトリを見ると.. ./node_modules/jsdom/lib/jsdom/living/file-apiを含むすべての内部/実装ファイルもそこにあることがわかります：

Blob-impl.js  File-impl.js  FileList-impl.js  FileReader-impl.js

FileList-impl.jsには、 FileList apiをバックアップする実際のJS実装が含まれています。

ここで、 ./node_modules/jsdom/lib/jsdom/living/generated/FileList.jsを見ると、実際に生成された「パブリックAPI」が表示されます。これは、使い慣れたものも含め、通常の使用法で確認できます。

class FileList {
  constructor() {
    throw new TypeError("Illegal constructor");
  }

このファイルはmodule.exports = iface;エクスポートします。これには、 iface.interfaceキーのみを使用する「通常の」パブリックAPI公開によって得られる機能よりもはるかに多くの機能が含まれています。 したがって、 require("./generated/FileList")直接使用すれば、何か楽しいことができるかもしれません。 実装の詳細を削除すると、次のようなインターフェイスができます。

const iface = {
  _mixedIntoPredicates: [],
  is(obj) {..snip..},
  isImpl(obj) {..snip..},
  convert(obj, { context = "The provided value" } = {}) {..snip..},
  create(constructorArgs, privateData) {..snip..},
  createImpl(constructorArgs, privateData) {..snip..},
  _internalSetup(obj) {},
  setup(obj, constructorArgs, privateData) {...snip...},
  interface: FileList,
  expose: {
    Window: { FileList },
    Worker: { FileList }
  }
}; // iface

取得するパワーがもっとあることがわかったので、 jsdom他の領域がどのようにアクセスする

HTMLInputElement-implを見ると、 FileList.createImpl()を使用しているようですが、残念ながら、実際にはパラメータの使用方法は示されていません。

• https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/nodes/HTMLInputElement-impl.js#L4
• https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/nodes/HTMLInputElement-impl.js#L404 -L411

createImplは、エクスポートされたifaceのsetup小さなラッパーです。

createImpl(constructorArgs, privateData) {
    let obj = Object.create(FileList.prototype);
    obj = this.setup(obj, constructorArgs, privateData);
    return utils.implForWrapper(obj);
  },

コンソールでこれをいじってみると、 FileListImplがサポートしているArray要素の表現力豊かなAPIがあるようです。 したがって、次のようなことができます。

var flist = require('./node_modules/jsdom/lib/jsdom/living/generated/FileList.js')
var myFileListImpl = flist.createImpl()
myFileListImpl.push('aa')

Symbol(wrapper)プロパティがあり、アクセスするには./node_modules/jsdom/lib/jsdom/living/generated/utils.js:37を使用する必要があります。

var utils = require('./node_modules/jsdom/lib/jsdom/living/generated/utils.js')
var wrapper = myFileListImpl[utils.wrapperSymbol]

エクスポートされたifaceには関数convert 、 throw new TypeError( $ {context}はタイプ 'FileList'ではありません。 提供されたオブジェクトがFileListない場合、 ); FileList 。 これを使って物事をテストすることができます。

生のmyFileListImplで呼び出すと、エラーがスローされます。

flist.convert(myFileListImpl)

上で抽出したwrapperを使用すると、エラーがスローされないことがわかります。

flist.convert(myFileListImpl[utils.wrapperSymbol])

これにより、 myFileListImpl変更し、許容可能なFileListオブジェクトを取得して、必要な場所に渡すことができます。 完全に機能する例（前のコードの代わりにutil.wrapperForImpl()使用）：

var _FileList = require('./node_modules/jsdom/lib/jsdom/living/generated/FileList.js')
var utils = require('./node_modules/jsdom/lib/jsdom/living/generated/utils.js')

var myMutableFileListImpl = _FileList.createImpl()

myMutableFileListImpl.length // 0
myMutableFileListImpl.push(new File([], 'a.jpg'))
myMutableFileListImpl.length // 1

var myFileList = utils.wrapperForImpl(myMutableFileListImpl)
_FileList.convert(myFileList) // no error

myFileList.length // 1
myFileList[0] // the File{} object

その知識があれば、元のブラウザー回避策ハックのjsdomテストバージョンを実装できます（怠惰のためにImmutableJSの上に実装されます）。

import { Map, Record } from 'immutable'

import jsdomFileList from 'jsdom/lib/jsdom/living/generated/FileList'
import { wrapperForImpl } from 'jsdom/lib/jsdom/living/generated/utils'

// Note: relying on internal API's is super hacky, and will probably break
// As soon as we can, we should use whatever the proper outcome from this issue is:
//   https://github.com/jsdom/jsdom/issues/1272#issuecomment-486088445

export const makeFileList = files => {
  const reducer = (fileListImpl, file) => {
    fileListImpl.push(file)
    return fileListImpl
  }

  const fileListImpl = files.reduce(reducer, jsdomFileList.createImpl())

  return wrapperForImpl(fileListImpl)
}

export class DataTransferStub extends Record({ items: Map() }) {
  get files() {
    return makeFileList(this.items.toList().toArray())
  }
}

export const stubGlobalDataTransfer = () => {
  global.DataTransfer = DataTransferStub
}

export const restoreGlobalDataTransfer = () => {
  global.DataTransfer = undefined
}

そして、それを手動でグローバル変数にワイヤリングして、 avaテストで使用できるようにします。

import {
  restoreGlobalDataTransfer,
  stubGlobalDataTransfer,
} from ../helpers/jsdom-helpers'

test.before(t => {
  stubGlobalDataTransfer()
})

test.after(t => {
  restoreGlobalDataTransfer()
})

最新のブラウザ（IE <= 11以外）はすべて、input.filesをFileListに設定することをサポートするようになりましたhttps://stackoverflow.com/a/47522812/2744776

これは最近のリリースで変更されたようです。 これが私のために働いたものです：

const jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
const jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
function makeFileList(...files) {
    const impl = jsdomFileList.createImpl(window);
    const ret = Object.assign([...files], {
        item: (ix) => ret[ix],
        [jsdomUtils.implSymbol]: impl,
    });
    impl[jsdomUtils.wrapperSymbol] = ret;
    Object.setPrototypeOf(ret, FileList.prototype);
    return ret;
}

Jest経由でJSDOMを使用している場合は、テストVMの外部に内部を要求する必要があります。 次のようなカスタムテスト環境を作成しました。

const JsdomEnvironment = require('jest-environment-jsdom');

/** See jsdom/jsdom#1272 */
class EnvWithSyntheticFileList extends JsdomEnvironment {
    async setup() {
        await super.setup();
        this.global.jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
        this.global.jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
    }
}

module.exports = EnvWithSyntheticFileList;

'外部'インポートにアクセスできるようにします。

これは最近のリリースで変更されたようです。 これが私のために働いたものです：

const jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
const jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
function makeFileList(...files) {
    const impl = jsdomFileList.createImpl(window);
    const ret = Object.assign([...files], {
        item: (ix) => ret[ix],
        [jsdomUtils.implSymbol]: impl,
    });
    impl[jsdomUtils.wrapperSymbol] = ret;
    Object.setPrototypeOf(ret, FileList.prototype);
    return ret;
}

Jest経由でJSDOMを使用している場合は、テストVMの外部に内部を要求する必要があります。 次のようなカスタムテスト環境を作成しました。

const JsdomEnvironment = require('jest-environment-jsdom');

/** See jsdom/jsdom#1272 */
class EnvWithSyntheticFileList extends JsdomEnvironment {
    async setup() {
        await super.setup();
        this.global.jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
        this.global.jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
    }
}

module.exports = EnvWithSyntheticFileList;

'外部'インポートにアクセスできるようにします。

これは私を近づけましたが、内部検証を通過することはできません：

exports.is = value => {
return utils.isObject（value）&& utils.hasOwn（value、im​​plSymbol）&& value [implSymbol] instanceof Impl.implementation;
};

TypeError：「HTMLInputElement」の「files」プロパティの設定に失敗しました：指定された値は「FileList」タイプではありません。

過ごした時間。 超イライラする

これは最近のリリースで変更されたようです。 これが私のために働いたものです：

const jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
const jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
function makeFileList(...files) {
    const impl = jsdomFileList.createImpl(window);
    const ret = Object.assign([...files], {
        item: (ix) => ret[ix],
        [jsdomUtils.implSymbol]: impl,
    });
    impl[jsdomUtils.wrapperSymbol] = ret;
    Object.setPrototypeOf(ret, FileList.prototype);
    return ret;
}

Jest経由でJSDOMを使用している場合は、テストVMの外部に内部を要求する必要があります。 次のようなカスタムテスト環境を作成しました。

const JsdomEnvironment = require('jest-environment-jsdom');

/** See jsdom/jsdom#1272 */
class EnvWithSyntheticFileList extends JsdomEnvironment {
    async setup() {
        await super.setup();
        this.global.jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
        this.global.jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
    }
}

module.exports = EnvWithSyntheticFileList;

'外部'インポートにアクセスできるようにします。

これは私を近づけましたが、内部検証を通過することはできません：

exports.is = value => {
return utils.isObject（value）&& utils.hasOwn（value、im​​plSymbol）&& value [implSymbol] instanceof Impl.implementation;
};

TypeError：「HTMLInputElement」の「files」プロパティの設定に失敗しました：指定された値は「FileList」タイプではありません。

過ごした時間。 超イライラする

新鮮な脳で再び始めた後、私は問題を見つけました。 どういうわけか、シンボルへの参照を破棄する2つの別々のjsdom環境を実行していました。