Stencil.js Jest：模拟 FileReader '未定义'，除非使用 window.FileReader答案

【问题标题】：Stencil.js Jest: mock FileReader 'not defined' unless use window.FileReaderStencil.js Jest：模拟 FileReader '未定义'，除非使用 window.FileReader
【发布时间】：2020-05-03 07:03:46
【问题描述】：

我有一个 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 类找不到模拟类，除非我专门使用 new window.FileReader()

【问题讨论】：

不确定，但这可能与进口顺序有关吗？也许你需要在导入你的 util 之前添加模拟。

标签： javascript jestjs stenciljs

【解决方案1】：

事实证明，Stencil 的jest 设置不包括jsdom。 Stencil 使用精简版的 Puppeteer 进行单元测试 - 可以通过 Stencil 的 newSpecPage() 返回的 page 对象访问其 window 和 document 属性

由于我的测试在没有newSpecPage 的情况下运行，我需要使用global 对象，例如global.FileReader = createMockFileReader(files)

【讨论】：