Блог

Итак, у меня есть это foo_script.js файл, который загружается и используется на product.html страница, в конце скрипт добавляет элемент DIV DOM с данными в нем. Информация для DIV поступает из функции «fetchData»:

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

Я пытаюсь протестировать foo_script.js с этим index.test.js файл с использованием Jest:

 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);
});
 

все работает нормально, всегда выполняется как исходный вызов Ajax в функции fetchData(), так и «издевательский» метод ajax. Нужно ли мне изменить функцию fetchData() на обещание вместо обратного вызова? или мне нужен материал sinon? Метод spyOn() не является перехватчиком? Кстати, я новичок в Jest.

Я сделал это так:

 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);