Stencil.js Jest：模擬 FileReader '未定義'，除非使用 window.FileReader

Question

我有一個帶有實用程序 class 的util.ts模塊，它在input上傳文件后讀取文件：

// utils/utils.ts

export class JsonFileProcessor {

   process(files) {
     // ReferenceError: FileReader is not defined
     const reader = new FileReader();
   }
}

在我的utils.spec.ts ，我模擬了window.FileReader （到目前為止尚未定義）

import { JsonFileProcessor } from "./utils";

describe("JsonFileProcessor", () => {

 it("processes the files", () => {
   // createMockFileReader returns a `class MockFileReader`
   // that replicates the methods of FileReader
   window.FileReader = createMockFileReader(files)
   const processor = new JsonFileProcessor();
   processor.process(someFiles);

我在 JsonFileProcessor.process 方法ReferenceError: FileReader is not defined中遇到錯誤，但是如果我將new FileReader()替換為new window.FileReader()它可以工作

我已經堅持了很多年了。 我正在使用 Stencil.js 並運行它附帶的 Jest 設置。 還有其他可用的window屬性（因為我已經對其進行了調試並在控制台記錄了它）

我知道我必須自己模擬 FileReader，但我很難理解為什么 util class 沒有找到模擬的 class，除非我專門使用new window.FileReader()

Answer 1

事實證明，Stencil 的jest設置不包括jsdom 。 Stencil 使用精簡版的Puppeteer進行單元測試 - window和document屬性可以通過 Stencil 的newSpecPage()返回的page object 訪問

由於我的測試在沒有newSpecPage的情況下運行，我需要使用global object 代替，例如global.FileReader = createMockFileReader(files)