Mocking- A guide to mock jQuery ajax using Jest [Full Example]

This is my personal favourite tip from the collection. In almost every project, we used an ajax call. Ajax testing is difficult because it is dependent on an external source. In this example, I’ll show you how to use jest to test JQuery ajax.

const APP = (() => {
  var userData = null;
  const myURL = "http://stackoverflow.com";
  const getData = () => {
    $.ajax({
      type: "GET",
      url: myURL,
      success: obj.handleSuccess,
      error: obj.handleError,
    });
  };
  const handleError = () => {
    console.log("ERROR");
  };
  const handleSuccess = (data) => {
    userData = data;
    console.log(userData);
  };
  const render = () => {
    return "<div>some stuff</div>";
  };
  const obj = {
    getData,
    handleError,
    handleSuccess,
    render,
  };
  return obj;
})();
module.exports = APP;

const APP = require("../ajax");
describe("Ajax", () => {
  beforeEach(() => {
    jest.restoreAllMocks();
  });
  it("Data should load", () => {
    const ajaxSpy = jest.spyOn($, "ajax");
    APP.getData();
    expect(ajaxSpy).toBeCalledWith({
      type: "GET",
      url: "http://stackoverflow.com",
      success: expect.any(Function),
      error: expect.any(Function),
    });
  });
  it("should handle success", () => {
    const mUser = { userId: 1 };
    const logSpy = jest.spyOn(console, "log");
    APP.handleSuccess(mUser);
    expect(logSpy).toBeCalledWith(mUser);
  });
  it("should handle error", () => {
    const logSpy = jest.spyOn(console, "log");
    APP.handleError();
    expect(logSpy).toBeCalledWith("ERROR");
  });
});
Reactions

Post a Comment

0 Comments

Close Menu