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

我在我的index.html文件中包含了JS依赖项（Foo.js）。当我在React组件中调用Foo.js时，它会在全局命名空间中查找构造函数并将其实例化。当我部署它这个伟大的工程，但是当我去建立一个围绕Component.js一个测试，测试无法找到Foo.js测试具有全局依赖性的React组件

<!--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文件中声明美孚是window.Foo，其曾在摆脱未定义的依赖在我的Jest测试中加入。

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

忽然，我引用错误走了，我很高兴。所以我继续编写测试，现在我得到一个时髦的错误，我认为该错误再次与全局依赖关系有关。

TypeError: undefined is not a function

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

来源

2015-09-22 jonullberg

看起来像你从未定义的变量调用一些函数。你能打开firebug/chrome dev来检查哪个是未定义的变量吗？ –

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

我要在我的测试环境中显式声明任何窗口对象的任何组件找到这些功能。

来源

2015-09-23 17:29:38 jonullberg

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

回答

相关问题