为 React 项目运行 Jest 测试时出现“ReferenceError：未定义窗口”

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 是一个全局浏览器对象，在 nodeJS 运行时使用 Jest 运行测试时未定义。通常 jest 可以使用提供这些全局变量的 jsdom 环境运行，在 cli 上使用 --env=jsdom 应该可以解决问题。至于 lib，您可能希望使用 jest 配置完全模拟它，请参阅文档：https://jestjs.io/docs/en/manual-mocks#mocking-node-modules。就像在 mocks 目录中的 node_modules 旁边的项目根目录的适当位置创建一个文件一样简单。