"ReferenceError: window is not defined"为 React 项目运行 Jest 测试时

Question

我有一些Jest测试，测试应用程序中与FirebaseUI完全无关的功能，并且不需要浏览器窗口即可执行。我在应用程序的其他不相关部分使用FirebaseUI。

话虽如此，当我尝试运行其中一个测试时，FirebaseUI会抛出一个错误"ReferenceError: window is not defined"，尽管我没有调用任何与FirebaseUI相关或需要浏览器的代码。

我知道Jest测试是在Node.js环境中运行的，所以浏览器窗口根本不存在。然而，由于我的Jest测试不调用任何FirebaseUI代码，所以不应该发生这种情况。

我该怎么办？有没有一种方法可以用Jest模拟一个虚拟浏览器窗口？

这是测试文件：

import '../../../../cbjs/setup_test'
import {getCenter, rgbaNormalizedToCSS, templateStructToNewCollage} from "./template_converter";
import {Point, Size} from "@piccollage/cbjs";
import {serverStringToStruct} from "../string_struct_converters";
import {ImageScrape} from "../../collage_editor/models/image_scrape";
// TODO: can't run tests from this file (Firebase error => window is not defined in ref_store constructor)
it("rgbaNormalizedToCSS works", () => {
expect(rgbaNormalizedToCSS([0, 0.5, 0.3, 0.4]))
.toBe("rgba(0, 128, 77, 0.4")
})
it("getCenter works", () => {
expect(getCenter([0, 0], [100, 100]))
.toBe(new Point(50, 50))
})
it("templateStructToNewCollage works (just a single ImageScrape)", () => {
const struct = serverStringToStruct("../test_files/test.plist", true)
console.log(struct)
const collage = templateStructToNewCollage('0', struct)
expect(collage.size$.value).toBe(new Size(300, 300))
expect(collage.ownerId).toBe('0')
expect(collage.backgroundURL$.value).toBe("photo-framework:/AAF82513-DA99-4F71-A371-7CCED92F4D52/L0/001")
expect(collage.scrapes$.value.length).toBe(1)
const scrape = collage.scrapes$.value[0]
expect(scrape instanceof ImageScrape).toBeTruthy()
expect(scrape.sizeBase$.value).toBe(new Size(300, 58.843537414965986))
expect(scrape.positioning$.value.point).toBe(new Point(396.9729729729729, 518.6104045537717))
expect(scrape.positioning$.value.rotation).toBe(0)
expect(scrape.positioning$.value.scale).toBe(1.8990109511630093)
expect(scrape.z$.value).toBe(1)
expect((scrape as ImageScrape).imageSourceUrl$.value)
.toBe("photo-framework:/687200F1-2A1C-40A0-BF76-B1D678C64799/L0/001")
})

这是堆栈跟踪：

ReferenceError: window is not defined
at node_modules/firebaseui/dist/npm.js:1:270
at node_modules/firebaseui/dist/npm.js:26:301
at Object.<anonymous> (node_modules/firebaseui/dist/npm.js:460:359)
at Object.<anonymous> (node_modules/@piccollage/cbjs/dist/src/firebaseAuth.js:15:33)

文件jest.config.js

module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
transformIgnorePatterns: [
'node_modules/(?!(cbjs)/)',
],
transform: {
"^.+\.(ts|js|jsx)$": "ts-jest"
},
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
};

Answer 1

window是一个全局浏览器对象，在Node.js运行时使用Jest运行测试时未定义该对象。通常，Jest可以使用将提供这些全局变量的jsdom环境来运行，在命令行界面中的--env=jsdom上使用就可以了。

至于库，您可能希望使用Jest配置来完全模拟它。请参阅文档：模拟节点模块。这就像在mocks目录中的node_modules旁边的项目根目录的适当位置创建一个文件一样简单。