创建 React 应用程序 - 在测试运行之前无法设置 window 对象

Question

正在尝试为 CRA 生成的应用程序中的组件设置一些测试。

由于导入的文件依赖于未初始化的 window 对象，导致测试失败运行。

快速概览：在 public/index.html 中，在 window 上定义了一个名为 window.config 的对象。

<script src="%PUBLIC_URL%/config.js"></script>
<script>
  // THESE PROPERTIES ARE DEFINED IN config.js
  window.config = {
    ENV,
    IDENTITY_URL,
    OIDC_CLIENT_ID,
  };
</script>

有一个名为 identity.constants.js 的文件导出了一个使用这些 window 变量的对象。

export const IdentityConfig = {
    authority: window.config.IDENTITY_URL,
    client_id: window.config.OIDC_CLIENT_ID,
    ... etc
};

我正在尝试测试的组件导入了另一个依赖于上面显示的 identity.constants.js 的组件。

问题是测试无法启动并抛出错误，指出 window.config 是来自 identity.constants.js 文件的 undefined。

阅读 CRA 文档后，我尝试将以下代码添加到 src/setupTests.js 以在测试开始前设置配置对象，但似乎在此代码运行s 之前失败。

global.config = {
  ENV: "development",
  IDENTITY_URL: "identityurl.com",
  OIDC_CLIENT_ID: "i-am-a-clientId",
  ... etc
};

我正在寻找一种在测试运行之前设置此 window 变量的方法（或者一种更好的方法来构建我使用 window 变量的方式）所以我可以成功运行我的测试。

Answer 1

globa.config定义了一个名为config的全局变量，需要先定义global.window，然后添加config作为属性的global.window。看来你的测试环境是node，如果你有jsdom作为你项目的devDependencies，试着在你的setupTests.js:[=22=中添加下面的代码]

import { JSDOM } from 'jsdom';

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
global.window = jsdom.window;
global.document = jsdom.window.document;

global.window.config = {
  ENV: "development",
  IDENTITY_URL: "identityurl.com",
  OIDC_CLIENT_ID: "i-am-a-clientId",
  ... etc
};

没有 jsdom，一个简单的修复如下：

global.window = {
  config: {
    ENV: "development",
    IDENTITY_URL: "identityurl.com",
    OIDC_CLIENT_ID: "i-am-a-clientId",
    ... etc
  }
}

创建 React 应用程序 - 在测试运行之前无法设置 window 对象

Create React App - Unable to set window object before test runs

javascript

jsdom

reactjs

jestjs

react-testing-library