如何模拟 jQuery .done() 以便它与 Jest 一起正确执行?

IT技术 javascript reactjs jestjs enzyme
2021-05-08 20:04:01

我正在尝试为更改密码的 React module编写单元测试,但我无法在括号中执行代码。我为module MyAPI 编写了一个模拟,模拟代码执行得很好,并且使用 console.log("something") 我可以在控制台中看到输出。

但是,我无法在 .done(function (data) 之后运行代码。这很可能是因为模拟正在用它自己的代码替换那些代码。

我知道一种选择是使用像 Nock 这样的假服务器,但我不想把它变成一个集成测试,除非我必须这样做。

我正在尝试测试的代码:

const MyAPI = require('../../my_api.js');
submitChangePasswordFormEvent(event) {
    const self = this;
    const params = {};
    event.preventDefault();
    event.stopPropagation();

    params.current_password = this.refs.current_password.getValue();
    params.passwordFirst = this.refs.passwordFirst.getValue();
    params.passwordSecond = this.refs.passwordSecond.getValue();

    MyAPI.my_api('/api/change_password/', params)
        .done(function (data) {
            // This code i would like to run but can't
            const elem = <Success>{t(['settings', 
            'passwords_changed'])}</Success>;
            self.setState({ pwerror: null, pwsuccess: elem });
            self.refs.current_password.value = '';
            self.refs.password1.value = '';
            self.refs.password2.value = '';
        })
        .error(function (errors) {
           // This code i would like to run but can't
            let msg = '';
            $.each(errors.responseJSON, function (k, v) {
                msg += v;
            });
            msg = <Error>{msg}</Error>;
            self.setState({ pwerror: msg, pwsuccess: null });
        });
}

MyAPI 的模拟文件

var MyAPI = function () {};


 MyAPI.prototype.my_api = function(url) {
 return $.ajax();
}
module.exports = new MyAPI();

和 Jest 设置脚本:

const jqueryMock = {
ajax: function (argument) {
  return {done: function (data) {
    return {error: function (errors) {
      return "success";
    }}}}
}}

global.$ = jqueryMock;
1个回答

你想要那个.done.error方法被执行但不想实际发出请求(顺便说一句。我不知道一个.error方法.fail)?然后我会做以下事情:

全局模拟 jQuery

__mocks__在工作目录顶层目录中为 jquery 创建一个全局模拟

//__mocks__/jquery.js:

const jQ = jest.requireActual("jquery");

const ajax = jest.fn(() => {
    return jQ.Deferred();
});

export const $ = {
    ...jQ,  // We don't want to mock jQuery completely (we might want to alter $.Deferred status)
    ajax,
};

export default $;

通过将jquery.js内部__mocks__目录当你想测试module要求的jQuery被自动开玩笑嘲笑(当然,在这种情况下,被部分地嘲笑......)。

使用此设置,您可以只运行代码而无需发出实际请求,但通常会运行.done.error方法以及注册的回调。

模拟 .done 和 .fail 方法

如果你希望执行注册的回调中.done或者 .fail你需要用手而不是返回到嘲笑他们jQ.Deferred()回用开玩笑嘲笑一个普通的JavaScript对象。

在一个特定的测试用例中,您绝对不希望.done/.error调用您注册的回调:

// By returning "this" we are able to chain in the way $.ajax("/api", params).done().fail()

const jqXHR = {
    done: jest.fn().mockImplementation(function () {
        return this;
    }),
    fail: jest.fn().mockImplementation(function () {
        return this;
    }),
    // some more $.Deferred() methods you want to mock
};

// Overwrite the global $.ajax mock implementation from __mocks__/jquery.js with our custom one
$.ajax.mockImplementation(() => jqXHR)

模拟成功或错误

当您想在特定测试用例中再次模拟成功或错误时,请覆盖全局模拟实现:

为了成功:

// success
const dfd = $.Deferred();
$.ajax.mockImplementation(() => {
    return dfd.resolve("success"); // this is what your done callback will receive as argument
});

对于错误:

// success
const dfd = $.Deferred();
$.ajax.mockImplementation(() => {
    return dfd.reject("error"); // this is what your fail callback will receive as argument
});

请注意,断言.done或被.fail调用/未调用是没有意义的,因为它们总是被调用,因为它们注册了您放入其中的回调。只有在$.Deferred解析或拒绝特定的注册回调时才会执行,然后您可以测试。

为了获得更好的可测试性 wrt 单元测试,您应该从.done/ 中提取匿名函数.error由于 JavaScript 很奇怪并且不像 Python(我更喜欢它),因此您无法轻松模拟被测module内的特定功能。所以你需要把它们放在一个专用module中并完全模拟这个module。然后你可以断言它们在成功或错误的情况下被调用。

我花了一段时间才弄清楚如何正确处理 jquery 的模拟,所以我想在这里分享我的经验。希望这可以帮助...