在 Jest 上模拟 jQuery ajax 调用答案

【问题标题】：Mocking jQuery ajax call on Jest在 Jest 上模拟 jQuery ajax 调用
【发布时间】：2020-12-05 08:14:52
【问题描述】：

所以我在 product.html 页面上加载并使用了这个 foo_script.js 文件，最后脚本添加了一个 DIV DOM 元素，其中包含数据它。 DIV 的信息来自函数“fetchData”：

var fetchData = function (callback) {
  $.ajax({
     url: "foo_data.json",
     type: "GET",
     success: function success(data) {
       assignDataToDiv(data);
       callback();
     }
   });
 }

我正在尝试使用 Jest 使用此 index.test.js 文件测试 foo_script.js：

it('fetchs data and changes the div', () => {
  document.body.innerHTML = fs.readFileSync(path.resolve(__dirname, './basic.html'), 'utf8');

  spyOn($, "ajax").mockImplementation(({ success }) => success( {
  url: "https://example.api",
  success: "fooBar"
}));

  spyOn($, 'ajax').andCallFake( function (params) {
   params.success({foo: 'bar'});
 });

  require('./foo_script.js');

  const targetedDiv = document.querySelector('.ugly_class');
  expect(targetedDiv.textContent.indexOf('Ay caramba')).toBeGreaterThan(0);
});

一切正常，函数 fetchData() 中的原始 Ajax 调用总是被执行，而不是“模拟”的 ajax 方法。我需要将 fetchData() 函数更改为 Promise 而不是回调吗？还是需要我的 sinon 东西？ SpyOn() 方法不是拦截器吗？顺便说一句，我是 Jest 的新手。

【问题讨论】：

jestjs 没有andCallFake API？这是什么？另外，你在用jquery ajax吗？

标签： ajax jestjs

【解决方案1】：

我是这样做的：

let proxied = window.XMLHttpRequest.prototype.open;
let open = (method, url, async, user, password) => {
  return (method, url, async, user, password) => { proxied.apply(this, arguments); };
};
const onload = jest.fn((_x) => {
  return JSON.stringify({"ip":"189.216.190.174","country_code":"MX","country_name":"Mexico"});
});
const onerror = jest.fn();
const send = jest.fn(function(){
  this.onload();
});
const setRequestHeader = jest.fn();
const xhrMockClass = function () {
  return {
    open,
    send,
    onerror,
    onload,
    setRequestHeader
  };
};

global.XMLHttpRequest = jest.fn().mockImplementation(xhrMockClass);

【讨论】：