导入自动调用函数将此绑定到window对象

Posted 2021-05-05

在一个开玩笑测试中，我需要导入一个声明一些全局函数的javascript模块。这个javascript模块是从django（ex jsi18n）自动生成的，它是一个自动调用函数

(function(globals) {
    var django = globals.django || (globals.django = {});
    ...
}(this));

这有助于使用反应组件内的翻译。例如，在我们的.jsx文件中使用全局定义函数gettext()包含翻译字符串

<p>{ gettext('got it') }</p>

我试图使用标准表单导入模块

import './djangojs';

但是，jest报告错误

TypeError: Cannot read property 'django' of undefined

因为this它是未定义的（严格模式）。所以我试图手动编辑模块并在最后添加}(this || window));并正常工作。但每次都会自动生成模块。那么如何将this绑定到window以使用全局对象而无需手动编辑文件？

答案

解：

我已经使用setupFiles直接导入了django javascript模块，因为@dfsq告诉我

"setupFiles": [
    "<rootDir>/path/to/jsi18n/djangojs.js",
    "<rootDir>/path/to/js/reverse.js"
],

另一答案

这个问题是巴别特有的。 Babel通常用于Jest测试装置，它可能在这里使用。

Babel transform-es2015-modules-commonjs为ES模块导入和require启用严格模式，因此this是导入模块中的undefined。

为了使一段代码在上下文处于严格模式时以松散模式执行，应该在全局上下文中进行评估：

const fs = require('fs');
const script = fs.readFileSync(require.resolve('./djangojs')).toString();
new Function(script)(); // or (0, eval)(script);

而不是import './djangojs'或require('./djangojs')。

预计script不必被编译（它将被按原样评估）并且不依赖于上下文（不使用require，因为它在全局范围内不可用）。即eval将用于常规脚本，如./djangojs，但不适用于CommonJS模块。

如果模块不应全局可用或在测试之间可能不同，则这可能很有用。

如果它应该可用于所有测试，那么应该使用setupFiles，如另一个答案所示。