如何在RequireJS中模擬單元測試的依賴關係？

Question

我有一個AMD模塊我想測試，但我想嘲笑它的依賴而不是加載實際的依賴關係。我使用requirejs，爲我的模塊的代碼看起來是這樣的：

define(['hurp', 'durp'], function(Hurp, Durp) { 
    return { 
    foo: function() { 
     console.log(Hurp.beans) 
    }, 
    bar: function() { 
     console.log(Durp.beans) 
    } 
    } 
} 

我怎樣才能模擬出hurp和durp這樣我就可以有效的單元測試？

Answer 1

我發現了三個不同的解決方案來解決這個問題，他們都不愉快。

的依賴項內嵌

define('hurp', [], function() { 
    return { 
    beans: 'Beans' 
    }; 
}); 

define('durp', [], function() { 
    return { 
    beans: 'durp beans' 
    }; 
}); 

require('hurpdhurp', function() { 
    // test hurpdurp in here 
}); 

的fugly。你必須用許多AMD樣板來混淆你的測試。

莫克載入依賴從不同路徑

這涉及使用單獨的config.js文件來定義爲每個點嘲笑而不是原來的依賴關係的依賴關係的路徑。這也很醜陋，需要創建大量的測試文件和配置文件。

假貨在節點

這是我目前的解決方案，但仍然是一個可怕的一個。

您可以創建自己的define函數來爲模塊提供自己的模擬並將您的測試置於回調中。然後你eval模塊運行測試，就像這樣：

var fs = require('fs') 
    , hurp = { 
     beans: 'BEANS' 
    } 
    , durp = { 
     beans: 'durp beans' 
    } 
    , hurpDurp = fs.readFileSync('path/to/hurpDurp', 'utf8'); 
    ; 



function define(deps, cb) { 
    var TestableHurpDurp = cb(hurp, durp); 
    // now run tests below on TestableHurpDurp, which is using your 
    // passed-in mocks as dependencies. 
} 

// evaluate the AMD module, running your mocked define function and your tests. 
eval(hurpDurp); 

這是我的首選解決方案。它看起來有點神奇，但它有一些好處。

1. 在節點中運行你的測試，所以不要搞亂瀏覽器自動化。
2. 在您的測試中不需要凌亂的AMD樣板。
3. 你在憤怒中使用eval，想象克羅克福德憤怒地爆炸。

顯然它仍然有一些缺點。

1. 由於您正在測試節點，因此您無法對瀏覽器事件或DOM操作進行任何操作。只適用於測試邏輯。
2. 還是有點笨重的設置。您需要在每次測試中剔除define，因爲這是您的測試實際運行的地方。

我在測試運行工作，給出這種東西用優雅的語法，但我仍然有問題沒有很好的解決辦法1.

結論

在requirejs懲戒DEPS吸硬。我發現了一種可行的方法，但對它仍然不滿意。請讓我知道你是否有更好的想法。

Answer 2

所以讀this post後，我想出了使用requirejs配置功能來創建測試新的上下文一個解決方案，你可以簡單地嘲笑你的依賴：

var cnt = 0; 
function createContext(stubs) { 
    cnt++; 
    var map = {}; 

    var i18n = stubs.i18n; 
    stubs.i18n = { 
    load: sinon.spy(function(name, req, onLoad) { 
     onLoad(i18n); 
    }) 
    }; 

    _.each(stubs, function(value, key) { 
    var stubName = 'stub' + key + cnt; 

    map[key] = stubName; 

    define(stubName, function() { 
     return value; 
    }); 
    }); 

    return require.config({ 
    context: "context_" + cnt, 
    map: { 
     "*": map 
    }, 
    baseUrl: 'js/cfe/app/' 
    }); 
} 

所以它會創建一個新的上下文，其中Hurp和Durp的定義將由您傳遞給函數的對象設置。該名稱的Math.random可能有點髒，但它的工作原理。因爲如果你需要一堆測試，你需要爲每個套件創建新的上下文，以防止重複使用你的模擬，或者當你想要真正的requirejs模塊時加載模擬。

在你的情況是這樣的：

(function() { 

    var stubs = { 
    hurp: 'hurp', 
    durp: 'durp' 
    }; 
    var context = createContext(stubs); 

    context(['yourModuleName'], function (yourModule) { 

    //your normal jasmine test starts here 

    describe("yourModuleName", function() { 
     it('should log', function(){ 
     spyOn(console, 'log'); 
     yourModule.foo(); 

     expect(console.log).toHasBeenCalledWith('hurp'); 
     }) 
    }); 
    }); 
})(); 

所以我在生產中使用這種方法了一段時間，其真正強大的。

Answer 3

有一個config.map選項http://requirejs.org/docs/api.html#config-map。

關於如何對使用它：

1. 定義正常的模塊;
2. 定義存根模塊;

3. 顯式配置RequireJS;

   requirejs.config({ 
       map: { 
       'source/js': { 
        'foo': 'normalModule' 
       }, 
       'source/test': { 
        'foo': 'stubModule' 
       } 
       } 
   }); 
   

在這種情況下，正常和測試代碼，你可以使用foo模塊，這將是真正的模塊引用和相應的存根。

Answer 4

您可以使用testr.js來模擬依賴關係。您可以設置testr來加載模擬依賴關係，而不是原來的依賴關係。下面是一個例子用法：

var fakeDep = function(){ 
    this.getText = function(){ 
     return 'Fake Dependancy'; 
    }; 
}; 

var Module1 = testr('module1', { 
    'dependancies/dependancy1':fakeDep 
}); 

退房這個問題，以及：http://cyberasylum.janithw.com/mocking-requirejs-dependencies-for-unit-testing/

Answer 5

你可能想從文檔看看新的Squire.js lib

：

Squire.js是Require.js用戶的依賴注入器使嘲笑依賴變得容易！

Answer 6

如果你想哪個隔離一個單元有普通的JS測試，那麼你可以簡單地使用這個片段：

function define(args, func){ 
    if(!args.length){ 
     throw new Error("please stick to the require.js api which wants a: define(['mydependency'], function(){})"); 
    } 

    var fileName = document.scripts[document.scripts.length-1].src; 

    // get rid of the url and path elements 
    fileName = fileName.split("/"); 
    fileName = fileName[fileName.length-1]; 

    // get rid of the file ending 
    fileName = fileName.split("."); 
    fileName = fileName[0]; 

    window[fileName] = func; 
    return func; 
} 
window.define = define; 

Answer 7

這個答案是基於Andreas Köberle's answer。
對我來說，實現和理解他的解決方案並不是那麼容易，所以我會更詳細地解釋它的工作方式，以及一些避免的陷阱，希望能夠幫助未來的訪問者。

因此，首先設置的：
我使用噶爲測試運行和MochaJs作爲測試框架。

使用類似鄉紳我沒有工作，出於某種原因，當我用它，測試框架扔錯誤：

TypeError: Cannot read property 'call' of undefined

RequireJs有可能性map模塊ID到其他模塊IDS。它還允許創建一個使用different config的全局require的require function。
這些功能對於此解決方案的工作至關重要。

這是我的模擬代碼版本，包括（很多）評論（我希望它是可以理解的）。我將它包裝在一個模塊中，以便測試可以很容易地要求它。

define([], function() { 
    var count = 0; 
    var requireJsMock= Object.create(null); 
    requireJsMock.createMockRequire = function (mocks) { 
     //mocks is an object with the module ids/paths as keys, and the module as value 
     count++; 
     var map = {}; 

     //register the mocks with unique names, and create a mapping from the mocked module id to the mock module id 
     //this will cause RequireJs to load the mock module instead of the real one 
     for (property in mocks) { 
      if (mocks.hasOwnProperty(property)) { 
       var moduleId = property; //the object property is the module id 
       var module = mocks[property]; //the value is the mock 
       var stubId = 'stub' + moduleId + count; //create a unique name to register the module 

       map[moduleId] = stubId; //add to the mapping 

       //register the mock with the unique id, so that RequireJs can actually call it 
       define(stubId, function() { 
        return module; 
       }); 
      } 
     } 

     var defaultContext = requirejs.s.contexts._.config; 
     var requireMockContext = { baseUrl: defaultContext.baseUrl }; //use the baseUrl of the global RequireJs config, so that it doesn't have to be repeated here 
     requireMockContext.context = "context_" + count; //use a unique context name, so that the configs dont overlap 
     //use the mapping for all modules 
     requireMockContext.map = { 
      "*": map 
     }; 
     return require.config(requireMockContext); //create a require function that uses the new config 
    }; 

    return requireJsMock; 
}); 

的最大的陷阱我遇到過，這從字面上花了我小時，創造了RequireJs配置。我試圖（深）複製它，並只覆蓋必要的屬性（如上下文或地圖）。這不行！只複製baseUrl，這工作正常。

使用

要使用它，需要它在你的測試中，創造了嘲笑，然後把它傳遞給createMockRequire。例如：

var ModuleMock = function() { 
    this.method = function() { 
     methodCalled += 1; 
    }; 
}; 
var mocks = { 
    "ModuleIdOrPath": ModuleMock 
} 
var requireMocks = mocker.createMockRequire(mocks); 

在這裏，一個完整的測試文件的例如：

define(["chai", "requireJsMock"], function (chai, requireJsMock) { 
    var expect = chai.expect; 

    describe("Module", function() { 
     describe("Method", function() { 
      it("should work", function() { 
       return new Promise(function (resolve, reject) { 
        var handler = { handle: function() { } }; 

        var called = 0; 
        var moduleBMock = function() { 
         this.method = function() { 
          methodCalled += 1; 
         }; 
        }; 
        var mocks = { 
         "ModuleBIdOrPath": moduleBMock 
        } 
        var requireMocks = requireJsMock.createMockRequire(mocks); 

        requireMocks(["js/ModuleA"], function (moduleA) { 
         try { 
          moduleA.method(); //moduleA should call method of moduleBMock 
          expect(called).to.equal(1); 
          resolve(); 
         } catch (e) { 
          reject(e); 
         } 
        }); 
       }); 
      }); 
     }); 
    }); 
});