测试具有全局依赖性的 React 组件

Question

我在我的 index.html 文件中包含了一个 JS 依赖项 (Foo.js)。当我在我的 React 组件中调用 Foo.js 时，它会在全局命名空间中找到构造函数并将其实例化。这在我部署时效果很好，但是当我围绕 Component.js 构建测试时，测试找不到 Foo.js

<!--Index.html-->
<head>
<script src="Foo.js"></script>
</head>

// Component.js
var bar = new Foo(); // Works in deployment but not in Jest tests

当运行我的测试出现此错误时：

RefererenceError: Foo is not defined

现在我想我会很聪明，在我的 Component.js 文件中将 Foo 声明为 window.Foo，这有助于摆脱我的 Jest 测试中未定义的依赖关系。

// Component.js
var Foo = window.Foo;
var bar = new Foo();

我的引用错误突然消失了，我很高兴。所以我继续编写测试，现在我得到一个时髦的错误，我认为它又与全局依赖有关。

TypeError: undefined is not a function

我相信我的错误仍然来自 Jest 没有正确模拟 window 对象上的依赖项。我不需要测试依赖关系，我只需要定义它，这样我就可以开始为组件的其余部分编写测试。有没有人想过我可能做错了什么？

Answer 1

所以我终于想出了解决这个问题的方法。在我的浏览器环境和测试环境中，我有两个完全独立的 window 对象。在我的测试中，在我的组件中要求之前，我必须将 window.Foo 设置为匿名函数。它看起来像这样：

// Component.js
var bar = new Foo(); // Works in browser but not in test
// ...Rest of code

// Component.test.js
describe('Component.js', function() {
  let Component;
  beforeEach(function() {
    window.Foo = function() {};
    Component = require('./Component.js');  // When it requires in component, 
      // it will now have Foo declared on the window object
  });
});

我必须在我的测试环境中显式声明任何 window 对象，以便任何组件都能找到这些函数。

测试具有全局依赖性的 React 组件

Testing React component with global dependency

requirejs

reactjs

jestjs