測試具有全局依賴性的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組件

回答

相關問題