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

我在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

当运行我的测试时，我得到这个错误:

referenceerror: Foo is not defined

现在我想我会很聪明，在我的Component.js文件中声明Foo是窗口。

在我的Jest测试中，它可以摆脱未定义的依赖。

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

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

TypeError: undefined is not a function

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

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

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

相关内容

最新更新

热门标签：