Question

我在index.html文件中包含了一个JS依赖项（Foo.js）。当我在我的React组件中调用Foo.js时，它在全局命名空间中找到Constructor并实例化它。这在部署它时效果很好，但是当我围绕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

现在我觉得我会很聪明，在我的Component.js文件中声明Foo是window.Foo，它在我的Jest测试中消除了未定义的依赖。

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

突然间，我的参考错误消失了，我很高兴。所以我继续编写测试，现在我得到一个时髦的错误，我认为这个问题与全局依赖关系有关。

TypeError：undefined不是函数

我相信我的错误仍然来自于Jest没有正确地模仿窗口对象上的依赖项。我不需要测试依赖项，我只需要定义它，这样我就可以为Component的其余部分编写测试。有没有人想过我可能做错了什么？

Answer 1

所以我终于想出了如何解决这个问题。在我的浏览器环境和测试环境中，我有两个完全独立的窗口对象。在我的测试中，在我需要组件之前，我必须将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
  });
});

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

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

1 个答案: