2017-06-15 122 views
0

使用笑話我如何測試一個函數,使我的jQuery應用程序中的ajax請求,並模擬其響應?我的應用程序沒有在nodejs中編譯,而是直接在瀏覽器中運行。在jest站點https://github.com/facebook/jest/tree/master/examples/jquery上的例子假定ajax函數是一個單獨的模塊,整個應用程序都會被編譯成類似webpack的東西。這裏是我的應用程序:

(function(root) { 
    "use strict"; 
    // if environment is node then import jquery. 
    var $ = (typeof module === "object" && module.exports) ? require('jquery') : jQuery; 


    function displayUser() { 

     var fetchCurrentUser = function (url) { 
      var xhr = $.get(url); 
      $.when(xhr) 
       .done(function(data) { 
        greet(data); 
       }) 
       .fail(function(jqXHR, textStatus, errorThrown) { 
        console.log(errorThrown); 
       }); 
     }; 

     var greet = function(data) { 
      $('#greet').text('Hello ' + data.name); 
     } 

     fetchCurrentUser('/my/api'); 

     return { 
      fetchCurrentUser: fetchCurrentUser, 
      greet: greet 
     }; 
    } 

    // Added this conditional so I can test in jest 
    if (typeof module === "object" && module.exports) { 
     // Node 
     module.exports = displayUser(); 
    } else { 
     // Browser (root is window) 
     root.displayUser = displayUser(); 
    } 
})(this); 

回答

0

在你的項目根嘲笑了jQuery node_module創建__mocks__/jquery.js。你可以在你的模擬jQuery中調用函數。這裏有一個簡單的代碼片段:

const $ = { 
    ajax(xhr) { return this }, 
    done(fn) { 
    if (fn) fn(); 
    return this; 
    }, 
    fail(fn) { 
    if (fn) fn(); 
    return this; 
    } 
}; 
export default $; 

,並添加一些expectfn來測試你的真實邏輯。