What is the best approach for testing async XMLHttpRequest callbacks using Jest?

Question

What is the best approach for testing async XMLHttpRequest callbacks using Jest?

In my Jest test, I am trying to call a mock server using ajax with XMLHttpRequest:

import mock from "xhr-mock";

describe("ajax callbacks", function() {
  beforeEach(function() {
    mock.setup();
  });

  afterAll(function() {
    mock.teardown();
  });

  it("gets called when done", function(done) {
    mock.get("/get-url", {
      status: 200,
      body: '{ "key": "value" }'
    });

    const doneCallback = jest.fn();

    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/get-url");
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        doneCallback();
        done();
      }
    }
    xhr.send();

    expect(doneCallback).toHaveBeenCalled();
  });
});

It's failing because the AJAX call is asynchronous and the expectation is made before the callback is called.

Is there a way for Jest to wait until the callback is called before making the expectation?

Please keep in mind that I cannot change the request to synchronous or switch to a Promise-based API just for testing purposes. This simplified version of the test may differ from the actual code being tested, which contains different abstractions.

javascript ajax testing jestjs xmlhttprequest

Answer 1

Answer №1

If you're looking to simulate XMLHttpRequests, Sinon is a great tool to achieve that.

import { createFakeServer } from 'sinon';

describe('Example', () => {

    let xhr;

    beforeEach(() => xhr = createFakeServer());

    afterEach(() => xhr.restore());

    test('example calls callback', () => {
        jest.spyOn(exampleObject, 'exampleCallback');

        xhr.respondWith('POST', '/expected/url', [200, {}, JSON.stringify({ foo: 'response' })]);

        exampleObject.funcToDoRequest();

        xhr.respond();
    
        expect(exampleObject.exampleCallback).toBeCalledWith({ foo: 'response' });
    });

});

To delve deeper into this topic, check out https://sinonjs.org/releases/v9.2.0/fake-xhr-and-server/

Alternatively, if you are using xhr-mock, employing setTimeout can be another approach. You can encapsulate the callback assertion within setTimeout and trigger the done() callback for the Jest test. It may feel like a workaround, but it gets the job done.

rest of your code
...

setTimeout(() => {
  expect(doneCallback).toHaveBeenCalled();
  done();
});

Answer 2

If you're looking to simulate XMLHttpRequests, Sinon is a great tool to achieve that.

import { createFakeServer } from 'sinon';

describe('Example', () => {

    let xhr;

    beforeEach(() => xhr = createFakeServer());

    afterEach(() => xhr.restore());

    test('example calls callback', () => {
        jest.spyOn(exampleObject, 'exampleCallback');

        xhr.respondWith('POST', '/expected/url', [200, {}, JSON.stringify({ foo: 'response' })]);

        exampleObject.funcToDoRequest();

        xhr.respond();
    
        expect(exampleObject.exampleCallback).toBeCalledWith({ foo: 'response' });
    });

});

To delve deeper into this topic, check out https://sinonjs.org/releases/v9.2.0/fake-xhr-and-server/

Alternatively, if you are using xhr-mock, employing setTimeout can be another approach. You can encapsulate the callback assertion within setTimeout and trigger the done() callback for the Jest test. It may feel like a workaround, but it gets the job done.

rest of your code
...

setTimeout(() => {
  expect(doneCallback).toHaveBeenCalled();
  done();
});

Answer 3

Answer №2

I managed to solve the problem by utilizing Jest's built-in async/await functionality. The workaround involves wrapping the asynchronous request in a Promise and resolving it when the onreadystatechange callback is triggered. Here is the code snippet:

import mock from "xhr-mock";

describe("ajax callbacks", function() {
  beforeEach(function() {
    mock.setup();
  });

  afterAll(function() {
    mock.teardown();
  });

  it("executes upon completion", async function() {
    mock.get("/get-url", {
      status: 200,
      body: '{ "key": "value" }'
    });

    const doneCallback = jest.fn();

    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/get-url");

    await new Promise(function(resolve) {
      xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
          doneCallback();
          resolve();
        }
      }
      xhr.send();
    });

    expect(doneCallback).toHaveBeenCalled();
  });
});

By using await, the test will pause until the Promise is resolved. Although this approach may seem unconventional, it was the most effective solution I could find. I explored other options but none seemed as viable.

If you want to learn more about incorporating async/await with Jest, check out the documentation here.

Answer 4

I managed to solve the problem by utilizing Jest's built-in async/await functionality. The workaround involves wrapping the asynchronous request in a Promise and resolving it when the onreadystatechange callback is triggered. Here is the code snippet:

import mock from "xhr-mock";

describe("ajax callbacks", function() {
  beforeEach(function() {
    mock.setup();
  });

  afterAll(function() {
    mock.teardown();
  });

  it("executes upon completion", async function() {
    mock.get("/get-url", {
      status: 200,
      body: '{ "key": "value" }'
    });

    const doneCallback = jest.fn();

    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/get-url");

    await new Promise(function(resolve) {
      xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
          doneCallback();
          resolve();
        }
      }
      xhr.send();
    });

    expect(doneCallback).toHaveBeenCalled();
  });
});

By using await, the test will pause until the Promise is resolved. Although this approach may seem unconventional, it was the most effective solution I could find. I explored other options but none seemed as viable.

If you want to learn more about incorporating async/await with Jest, check out the documentation here.

What is the best approach for testing async XMLHttpRequest callbacks using Jest?

Answer №1

Answer №2

Similar questions

Customize your Shopify Messenger icon using JavaScript!

The pagination feature of the material-ui data grid is experiencing issues with double clicks because of its compatibility with the react-grid-layout library for

Unable to import necessary modules within my React TypeScript project

Need to specify a parameter type for the input tag in HTML

The initialization of the R Shiny HTML canvas does not occur until the page is resized

Tips for continuously running a loop function until retrieving a value from an API within a cypress project

React/Redux Component fails to re-render

The data contained in the Response is an extensive script instead of the intended JSON object

Exploring the possibilities of combining OpenCV with web technologies like Javascript

Is there a way to retrieve text from within a div using code behind in asp.net with c#?

Independent Dropbox Collections

Struggling with incorporating a print preview feature using JavaScript?

Shuffle the JSON data before displaying it

Extract particular elements from a nested JSON response in order to convert them into a string

Overlap one element entirely with another

Make object calculations easy with the power of JavaScript

Utilizing LocalStorage in an Ionic application to store data on a $scope

Angular Checkbox Single Select

Issue with getStaticProps in Next.js component not functioning as expected

Can a webpage be sent to a particular Chromecast device without using the extension through programming?