Jsdom: FileList에 파일을 추가하는 일부 메소드 노출

input.files = createFileList(file1, file2, ...) 이면 좋을 것입니다.

@cpojer 거기에 넣을 실제 File 개체를 생성하고 있습니까?

input.files 쓰기 가능하게 만드는 것은 아마도 나쁠 것입니다. 아마도 원시 배열을 반환하여 스스로 채우거나 fillFileList(input.files, [file]) 와 같은 것을 할 수 있습니다.

실제로는 모의 데이터만 사용하므로 .files 에 개체 배열을 채웁니다. 그러나 그것을 File 객체로 요구하는 것이 합리적이라고 생각합니다.

여기서 defineProperty가 괜찮을 것 같습니까? DOM 속성을 재구성할 수 있는 이유는...

그래도 실제 데이터로 실제 FileList를 만드는 것이 훨씬 낫습니다.

배열 인덱스를 사용하여 FileList 항목에 액세스하는 것도 가능해야 합니다. .item 이 필드에 액세스하는 유일한 방법은 아닙니다.

알겠습니다. 몇 가지 잠재적인 문제가 있는 것 같습니다.

• FileList에 색인화된 액세스가 제대로 작동하지 않습니다(버그).
• 테스트를 위해 FileList 개체를 생성할 방법이 없습니다(웹 플랫폼 기능 차이).

그러나 inputEl.files를 수정하는 것은 문제가 아닙니다.

네, 제 말은 엔지니어들에게 정규 과제보다 Object.defineProperty를 사용하라고 말하는 것은 굉장하지 않다는 것을 의미하지만 저는 그걸로 살 수 있습니다.

글쎄, 그들은 어쨌든 실제 브라우저에서 그렇게해야하므로 나에게는 합리적으로 보입니다 ...

안녕하세요, 1년이 넘은 것 같습니다. 이 문제와 관련하여 진행 상황이 있는지 묻고 싶습니다. Jest 프레임워크를 사용하여 내부적으로 jsdom을 사용하는 React/Redux 앱을 테스트합니다. 하나 이상의 File 객체로 FileList를 동적으로 생성해야 하는 문제가 있습니다.

lib/jsdom/living/filelist.js를 보면 FileList에 대한 생성자가 있지만 파일을 전달할 수 있는 옵션이 없다는 것을 알 수 있습니다. 나는 FileList와 File에 보안상의 이유로 사양에 따라 생성자가 없다는 것을 이해하지만 생성자가 File 객체의 배열을 허용하거나 최소한 File을 추가할 수 있는 추가 메서드(_setItem_이라고 가정해 봅시다)를 허용할 의도가 있습니까? 특히 테스트 목적으로 개체를 목록에 추가하시겠습니까?

FileList와 관련된 또 다른 문제도 있습니다. 내가 착각하지 않는다면 NodeList(lib/jsdom/living/node-list.js)와 같은 배열과 같은 객체여야 합니다. 즉, 두 가지 방법으로 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');

이렇게 하면 수동으로 만들 필요 없이 속성(크기, lastModified, 유형...)이 있는 파일이 생성되었습니다.

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개의 파일만 필요하지만 FileList에 여러 파일을 추가하기 위해 for 루프로 변경할 수도 있습니다. 기능이 사양을 따르는 jsdom에서도 제공하는 File 생성자를 통해 사용자 정의 이름/유형/크기로 파일을 만들고 있습니다.

이것은 jsdom 환경에서 FileList를 조롱하는 방법을 찾는 사람에게 도움이 될 수 있지만 여전히 한 가지 문제가 있습니다. 이 방법을 사용하여 파일 배열로 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 문제에 대한 해당 트위터 게시물에서 약간의 반대 의견이 있는 것 같습니다.

@domenic 좋아, 나는 이것에 대한 기본 시작을 설정했습니다. 모든 검사가 있는 것은 아니지만 본질적으로 @niksajanjic 이 말한 내용입니다.

파일 생성

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
}

데모 파일

/*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 나는 거기에 있는 나의 후기 포스트에서 설명한 방식으로 테스트를 했습니다. 불행히도 몇 달 후 동료 중 한 명이 해당 코드를 복사하려고 했을 때 최신 버전의 jsdom 작업을 중단했습니다. 따라서 그 시점에서 FileList에 대한 테스트를 주석 처리해야 했습니다. 그 이후로 우리는 이러한 테스트를 작성할 방법을 찾을 수 없었고 지난 몇 달 동안 아무도 그것을 다시 살펴보고 방법을 찾으려고 할 시간이 없었습니다.

@niksajanjic 업데이트
그래도 필요하신 분들은 보시고 사용하세요~

jsdom 프로젝트가 솔루션을 제공할 때까지 이 문제를 해결하는 간단한 도우미 스크립트를 만들었습니다.
https://bitbucket.org/william_rusnack/addfilelist/src/master/

파일 하나 추가:

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

```자바스크립트
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 개체를 스푸핑할 수 있었습니다. 구문은 Flow 주석이 있는 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://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

불행히도 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 - 섹션

소스를 조금 찾아보니 exports.FileList = require("./generated/FileList").interface;

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

~하지만 GitHub에서 ./generated 빌드로 끝나는 소스를 찾는 위치가 명확하지 않았습니다 ~

• 관련 위치인 것 같습니다: https://github.com/jsdom/jsdom/blob/master/Contributing.md#architecture
  
  
  
  • yarn prepare : https://github.com/jsdom/jsdom/blob/master/package.json#L86
  
  
  • yarn convert-idl : https://github.com/jsdom/jsdom/blob/master/package.json#L104
  
  
  • 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");
  }

이 파일은 iface.interface 키만 사용하는 '일반' 공개 API 노출을 통해 얻을 수 있는 것보다 훨씬 더 많은 기능을 포함하는 module.exports = iface; 내보냅니다. 따라서 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() ,하지만 불행하게도 실제로 어떻게 PARAMS를 사용하는 우리를 표시하지 않습니다 :

• 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 . 우리는 이것을 테스트하는 데 사용할 수 있습니다.

원시 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;

그래서 '외부' 수입품에 접근할 수 있었습니다.

이것은 나를 가까웠지만 내부 유효성 검사를 통과할 수 없습니다.

export.is = 값 => {
return utils.isObject(값) && utils.hasOwn(값, implSymbol) && 값[implSymbol] Impl.implementation의 instanceof;
};

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;

그래서 '외부' 수입품에 접근할 수 있었습니다.

이것은 나를 가까웠지만 내부 유효성 검사를 통과할 수 없습니다.

export.is = 값 => {
return utils.isObject(값) && utils.hasOwn(값, implSymbol) && 값[implSymbol] Impl.implementation의 instanceof;
};

TypeError: 'HTMLInputElement'에서 'files' 속성을 설정하지 못했습니다. 제공된 값이 'FileList' 유형이 아닙니다.

보낸 시간. 슈퍼 실망

새로운 두뇌로 다시 시작한 후 문제를 찾았습니다. 여하튼 나는 기호에 대한 참조를 버렸던 2개의 개별 jsdom 환경을 실행했습니다.