用玩笑嘲笑jquery $ .ajax

Question

Using jest how can I test a function that makes an ajax request in my jQuery app and mock its response? My app is not compiled in nodejs and runs straight in a browser. The example on the jest site https://github.com/facebook/jest/tree/master/examples/jquery assumes ajax function is a separate module and the whole app gets compiled with something like webpack. Here is my app:

(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

create a __mocks__/jquery.js in your project root to mock the jquery node_module. You can invoke functions in your mock jquery. Here's a simple code snippet:

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

And add some expect in your fn to test your real logic.