如何在 karma/mocha 测试套件中模拟窗口对象属性？答案

【问题标题】：How can window object properties be mocked in a karma/mocha test suite?如何在 karma/mocha 测试套件中模拟窗口对象属性？
【发布时间】：2016-08-19 14:45:55
【问题描述】：

我正在使用 karma 和 mocha 以及 React 的 TestUtils 来测试 React 应用程序。我正在测试的组件之一导入具有以下导出的模块：

export const OPTIONS = window.__OPTIONS__;

在我的测试中，我将组件渲染到 karma 中的虚拟 chrome 浏览器中。我这样做是通过： let tree = TestUtils.renderIntoDocument(<Component />);

“组件”的渲染函数引用OPTIONS.someOption 之类的东西，当上面的测试运行时，它会爆炸并显示cannot read property 'someOption' of undefined.

我尝试在before() 函数中“模拟”__OPTIONS__ 变量（在测试运行之前设置它的值），但即使在将其注销并看到它实际上已设置后，该值我的组件模块中的它仍然未定义。所以看起来 webpack 在我的任何测试脚本实际运行之前捆绑了模块，因此它总是未定义的。

有没有办法将window.__OPTIONS__ 设置为一个值，就好像它包含在我页面顶部的<script>window.__OPTIONS__ = {};</script> 中一样，因此可以在我的组件模块中正确导入一个值？

我不想解释为什么要将变量附加到窗口对象，因为在这种情况下这是我无法避免的……这是 Salesforce 的特定原因。如果我可以完全避免使用该变量，我会的。

【问题讨论】：

标签： javascript unit-testing reactjs webpack karma-mocha

【解决方案1】：

尝试在beforeEach 中使用__OPTIONS__ 将窗口对象添加到全局：

beforeEach(function() {
    global.window = {
        __OPTIONS__: {}
    };
});

【讨论】：

【解决方案2】：

我尝试了global 路由，但无济于事...由于 karma 正在启动 Chrome 浏览器，因此始终定义了窗口。在弄乱了不同区域的日志之后，我确认操作顺序是 1. 捆绑模块 2. 运行测试脚本。我直接在组件中的 import 语句下方添加了一个日志，然后在我的测试脚本的第一行添加了一个日志，并且在我导入之后的日志总是首先报告未定义。

为此，我后退了一步，查看了tests.webpack.js，它位于我的业力配置文件中的files 和preprocessors (webpack) 中。我在var context = require.context('./src', true, /-test\.jsx?$/); 和context.keys().forEach(context); 行上方添加了我的变量声明，现在它可以正常工作了。

【讨论】：