Jest单元测试中的全局变量

Question

我是一个新手，正在尝试为我现有的React应用编写一些单元测试，使用Jest框架。 我有一个全局变量window.CONFIG，它存储了一些配置信息，这些信息在应用程序的不同位置使用。该变量在着陆HTML页面的脚本标记中进行初始化。

现在，我正在尝试编写一个帮助函数的测试，该函数依赖于这个window.CONFIG，但是当访问时，它始终为未定义。

以下是代码：

config.js

export default window.CONFIG;

app/helper.js

import config from "../config";

export default  {
  getCompanyURL(company) {
    return config.baseUrl + "/companies/" + company.id;
  },
}

_ tests _/helpers-test.js

jest.dontMock('../app/helpers.js');

var helper = require('../app/helpers.js').default;

describe('Get company URL', function() {

 it('returns company url with company id appended', function() {
   expect(companies.getCompanyURL({id:     1})).toBe('test_base_url/companies/1');
 });
});

Get Company Url的config始终未定义。由于浏览器登陆页面未加载，因此window.CONFIG未初始化。我应该如何在Jest单元测试中模拟此config模块呢？

提前致谢！

- Yashika Garg

Answer 1

我不确定这是否对您有所帮助，但是您可以直接将全局变量放入您的 package.json 文件中。

"jest":{
  "globals": {
    "config": {"foo":"bar"}
  }
}

- Falantar

---

Create React App只支持覆盖以下Jest选项：• collectCoverageFrom • coverageReporters • coverageThreshold • coveragePathIgnorePatterns • extraGlobals • globalSetup • globalTeardown • moduleNameMapper • resetMocks • resetModules • snapshotSerializers • transform • transformIgnorePatterns • watchPathIgnorePatterns.这些选项在您的package.json Jest配置中，目前不受Create React App支持。当我更新package.json时，就会得到这个结果。你有什么想法吗？或者我需要弹出模块？ - Learner

Answer 2

在最近的一个项目中（使用create-react-app、jest、react testing library和TypeScript），我使用了变量globalThis._env_。

尝试在包含测试的文件中覆盖它的所有尝试都失败了，但是将其添加到setupTests.ts最终成功了。

// in setuTests.ts
globalThis._env_ = {
    UPLOAD_FILE_SIZE_LIMIT_MB: '5'
};

我认为setupTests.js / setupTests.ts是一个React测试库的东西 - https://create-react-app.dev/docs/running-tests/#react-testing-library

- RobertG

---

像这样：https://dev59.com/HVoT5IYBdhLWcg3w4SpQ#58809134 - RobertG

Answer 3

我通过在__mocks__目录下创建config.js的手动模拟来解决了这个问题，具体如下：

let configMock = jest.genMockFromModule('../config');
let __mockConfig = {};

__mockConfig.baseUrl = "test_base_url/";

configMock = __mockConfig;

export default configMock;

- Yashika Garg

---

如何访问 window.config，在任何测试用例中，如果您输入 console.log(window.config.baseUrl) => 将获取 "test_base_url/" - Learner