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

How can window object properties be mocked in a karma/mocha test suite?

本文关键字：模拟 窗口 对象 属性 套件 测试 karma mocha      更新时间：2023-09-26

我正在使用karma和mocha以及React的testtils来测试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>中，从而在我的组件模块中正确导入一个值一样?

我不想讨论为什么我将变量附加到window对象，因为在这种情况下我无法避免…这是Salesforce特有的原因。如果我可以完全避免使用这个变量，我就会。

尝试在beforeEach中添加__OPTIONS__的窗口对象:

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

我尝试了global路线，但无济于事…自从karma在Chrome浏览器中运行以来，window就已经被定义了。在登录不同区域后，我确认操作顺序为1。模块被捆绑在一起。测试脚本运行。我直接在我的组件的import语句下面添加了一个日志，然后在我的测试脚本的第一行，并且我的import之后的日志总是首先报告未定义。

考虑到这一点，我备份了一步，看了看tests.webpack.js，这是在files和preprocessors (webpack)在我的karma配置文件。我在var context = require.context('./src', true, /-test'.jsx?$/);和context.keys().forEach(context);行上面添加了变量声明，现在它工作得很好。

相关文章：