jquery $ .ajax with jest

Question

jestの使用jQueryアプリケーションでajaxリクエストを作成し、その応答を模擬する関数をテストするにはどうすればよいですか？私のアプリはnodejsでコンパイルされず、ブラウザで直接実行されます。冗談サイト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); 

Answer 1

は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 $; 

そして、あなたの本当のロジックをテストするために、あなたのfnでいくつかのexpectを追加します。ここでは、簡単なコードスニペットです。