29

I want to test AJAX methods (vanilla XHR) and I can't find the way to do it with Jest framework. I found mock-ajax.js for Jasmine. The problem is I can't find the way to install it.

Is there maybe a better way to unit test Ajax functions in Jest?

7 Answers 7

32

The jest api has changed a bit. This is what I use. It doesn't do anything but it's enough to render my components.

const xhrMockClass = () => ({
  open            : jest.fn(),
  send            : jest.fn(),
  setRequestHeader: jest.fn()
})

window.XMLHttpRequest = jest.fn().mockImplementation(xhrMockClass)

and in the test file:

import '../../__mock__/xhr-mock.js'

0
20

You can test XHR in Jest without additional packages. This is helper function which creates mock object for XMLHttpRequest:

let open, send, onload, onerror;

function createXHRmock() {
    open = jest.genMockFn();

    // be aware we use *function* because we need to get *this* 
    // from *new XmlHttpRequest()* call
    send = jest.genMockFn().mockImpl(function(){   
        onload = this.onload.bind(this);
        onerror = this.onerror.bind(this);
    });

    const xhrMockClass = function () {
        return {
            open,
            send
        };
    };

    window.XMLHttpRequest = jest.genMockFn().mockImpl(xhrMockClass);
}

And you can use it in test as follows:

it('XHR success', () => {
    createXHRmock();

    // here you should call GET request

    expect(open).toBeCalledWith('GET', 'http://example.com', true);
    expect(send).toBeCalled();

    // call onload or onerror
    onload();

    // here you can make your assertions after onload
});
1
  • 6
    I think this is now jest.fn().mockImplementation from the docs
    – Peter
    Jan 18, 2018 at 11:40
16

Here's a TypeScript example working with Jest 26:

function performRequest(callback: any) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://example.com/');
  xhr.onreadystatechange = () => {
    if (xhr.readyState !== 4 || xhr.status !== 200) return;
    callback(xhr.response);
  };
  xhr.responseType = 'json';
  xhr.setRequestHeader('Accept', 'application/json');
  xhr.send(null);
}

describe('request', () => {
  const xhrMock: Partial<XMLHttpRequest> = {
    open: jest.fn(),
    send: jest.fn(),
    setRequestHeader: jest.fn(),
    readyState: 4,
    status: 200,
    response: 'Hello World!'
  };

  jest.spyOn(window, 'XMLHttpRequest').mockImplementation(() => xhrMock as XMLHttpRequest);
  const callback = jest.fn();
  performRequest(callback);
  expect(xhrMock.open).toBeCalledWith('GET', 'https://example.com/');
  expect(xhrMock.setRequestHeader).toBeCalledWith('Accept', 'application/json');
  (xhrMock.onreadystatechange as EventListener)(new Event(''));
  expect(callback.mock.calls).toEqual([['Hello World!']]);
});
1
  • Contrary to most of the other solutions, this one correctly works with TypeScript, in particular thanks to the Partial type.
    – ARno
    Jul 5, 2021 at 21:06
3

As mentioned you don't need additional libraries:

 // mocks.js is where you could put your mocks (example below)
 const mocks = require('./mocks.js')

 test('XHR test', () => {
   let xhrMock = {
      open: jest.fn(),
      setRequestHeader: jest.fn(),
      onreadystatechange: jest.fn(),
      send: jest.fn(),
      readyState: 4,
      responseText: JSON.stringify(mocks),
      status: 200
    }

   window.XMLHttpRequest = jest.fn(() => xhrMock)

   sendData().then((response) => {
      // You could do you checks here. Some examples:
      expect(xhrMock.setRequestHeader).toBeCalledWith('Cache-Control', 'no-cache')
      expect(xhrMock.open).toBeCalledWith('POST', 'you_api_url.com/end_point/')
      expect(xhrMock.withCredentials).toBe(false)

      let formData = new FormData()
      formData.append('firstParam', 'firstParamValue')  

      expect(yoloRequestMock.send).toBeCalledWith(formData)
      expect(JSON.stringify(response)).toBe(JSON.stringify(mocks))
   })
   // when onload is called, resolve and reject has been initialed.
   xhrMock.onreadystatechange()

    // the following function is the one which sends the request (to be tested)
    function sendData() {
       return new Promise(function(resolve, reject) {
         let formData = new FormData()
         formData.append('firstParam', 'firstParamValue')
         let xhr = new XMLHttpRequest()
         xhr.withCredentials = false
         xhr.onreadystatechange = function () {
           if (this.readyState === 4) {
             if(xhr.status === 200) {
               resolve(JSON.parse(xhr.responseText))
             } else {
               reject(xhr.responseText)
             }
           }
         }
         xhr.open('POST', T2S_VISUAL_SEARCH_PARAMS.t2sVisualSeacchApiUrl)
         xhr.setRequestHeader("Cache-Control", "no-cache");
         xhr.send(formData)
       })
    }
  }

The file mocks.js contains the mocks:

module.exports =
  {
    response: {
      body: { ... }
    }
  }
2

Here's a function that will create a XMLHttpRequest mock and install it into window for you.

const mockXMLHttpRequest = () => {
  const mock = {
    open: jest.fn(),
    addEventListener: jest.fn(),
    setRequestHeader: jest.fn(),
    send: jest.fn(),
    getResponseHeader: jest.fn(),

    upload: {
      addEventListener: jest.fn(),
    },
  };

  window.XMLHttpRequest = jest.fn(() => mock);

  return mock;
};

Which you can then use in a test like so:

const mock = mockXMLHttpRequest();

// Get the upload progress callback
// This assumes you attach your listeners in a stable order
expect(mock.upload.addEventListener).toHaveBeenCalledTimes(1);
const [[, progress]] = mock.upload.addEventListener.mock.calls;

// Get the load callback
expect(mock.addEventListener).toHaveBeenCalledTimes(1);
const [[, load]] = mock.addEventListener.mock.calls;

expect(mock.open).toHaveBeenCalled();
expect(mock.send).toHaveBeenCalled();

// Fire a progress event
progress({ loaded: 12, total: 100 });

// ...

mock.status = 201;
mock.getResponseHeader.mockReturnValue('application/json');
mock.response = JSON.stringify({ id: 111 });

// Fire a load event
load();

// ...
0

This is how I did it.

test.js

const open = jest.fn();
const onload = jest.fn((x) => {/* <your response data> */});
const onerror = jest.fn();
const send = jest.fn(function(){
    this.onload()
})

const xhrMockClass = function () {
    return {
        open,
        send,
        onerror,
        onload
    };
};

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

// ...

test('Should make a request', () => {
 // do stuff to make request

 expect(send).toHaveBeenCalled()
 expect(onload).toHaveBeenCalledWith(/* <your response data> */)
 expect(open).toHaveBeenCalledWith('GET', 'some/url', true)
})
0

Taking @thajay's answer a step further, I mocked all the XMLHttpRequest properties (which extends from XMLHttpRequestEventTarget and EventTarget:

window.XMLHttpRequest = jest.fn(() => ({
  abort: jest.fn(),
  addEventListener: jest.fn(),
  dispatchEvent: jest.fn(),
  error: jest.fn(),
  getResponseHeader: jest.fn(),
  load: jest.fn(),
  loadend: jest.fn(),
  loadstart: jest.fn(),
  onreadystatechange: jest.fn(),
  open: jest.fn(),
  progress: jest.fn(),
  readyState: jest.fn(),
  removeEventListener: jest.fn(),
  response: jest.fn(),
  responseText: jest.fn(),
  responseType: jest.fn(),
  responseURL: jest.fn(),
  responseXML: jest.fn(),
  send: jest.fn(),
  setRequestHeader: jest.fn(),
  status: jest.fn(),
  statusText: jest.fn(),
  timeout: jest.fn(),
  upload: jest.fn(),
  withCredentials: jest.fn(),
}))

and put this in my jest.setup.js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.