FileList가 제공하는 <input type="file" multiple /> 을 조롱해야 합니다. 이 문서에서는 조롱하는 방법을 보여줍니다. 나는 그것을 조롱하는 데 어려움을 겪었습니다.
모의FileList에 대한 요구 사항은 다음과 같습니다.

Object.prototype.toString.call 은 FileList 모의 개체를 나타내는 문자열을 반환할 수 있습니다.

테스트할 함수는 각 File using for 문을 처리할 수 있습니다.

FileList를 모의하는 방법?

환경

비테스트 v0.9.3

소스 코드

테스트된 함수의 소스 코드

export const filesProcess = (fileList) => {
  if (
    Object.prototype.toString.call(fileList).split(" ")[1].slice(0, -1) !=
    "FileList"
  )
    throw Error("Please input FileList type object as the argument.");

  for (let file of fileList) {
    console.log("File name: " + file.name);
  }
};

테스트 코드

    it("testing", () => {
      const file = new File(["foo"], "foo.txt", {
        type: "text/plain",
      });
      const file2 = new File(["this is test file"], "test.txt", {
        type: "text/plain",
      });
      const input = document.createElement("input");
      input.setAttribute("type", "file");
      input.setAttribute("name", "file-upload");
      input.multiple = true;
      let mockFileList = Object.create(input.files); 
      mockFileList[0] = file;
      mockFileList[1] = file2;
      Object.defineProperty(mockFileList, "length", { value: 2 });
      console.log(
        "The string representation the object: " +
          Object.prototype.toString.call(mockFileList)
      );
      filesProcess(mockFileList);
      expect(1).toBe(1); // Dummy assertion because I want to try only to mock FileList
    });

결과

결과는 console.log를 사용하여 테스트한 결과입니다.

참조

Object.create() - 자바스크립트 | MDN

Object.create() 메서드는 다음을 사용하여 새 객체를 만듭니다.
새로 생성된 객체의 프로토타입으로 기존 객체.



developer.mozilla.org

여담으로

FileList를 사용하여 <input type="file" multiple />에 일부 파일을 입력하여 생성한 console.log의 모든 요소를 ​​브라우저에 표시합니다. 그 후 필요한 요소를 구글링해서 방법을 만들고 테스트 코드를 만들었다.


원본 기사는 다음과 같습니다. 이 기사는 일본어에서 영어로 번역되었습니다.

FileListをモックする（FrontEndJavascriptTest）

zenn.dev