1.0.2 • Public • Published


Use sinon to create a fake XHR server for stubbing remote requests.

What this add-on does:

  • equips your test suite with XHR-stubbing helpers
  • manages the fake server for each test in the suite


  • Jasmine 2.0+

Works with:


define(function(require) {
  describe('My component', function() {
    // Enable the jasmine_xhr functionality for this suite:
    this.xhrSuite = true;
    it('should pull a remote resource', function() {
      this.respondWith('GET', '/users/1', [ 200, {
        "id": "1",
        "age": 3
      // something that requests the endpoint
      $.ajax({ url: '/users/1' }).then(function(user) {
      this.respond(); // respond to pending requests

This add-on inter-operates with jasmine_rsvp (if it was found) by automatically flushing the promise-queue when you respond() to a request.

The add-on can run in two modes: the first (and is the more common) is suited for tests where you don't care about the code that issues the requests, but instead you care about what the code does with the response.

The second mode lets you inspect each issued request and is meant for verifying that some code is issuing the right requests in the right format.

Mode 1: auto-responding

The mode is engaged as shown in the first example:

describe('my async suite', function() {
    this.xhrSuite = true;

respondWith(method, url, response)

See the responses section in the sinon documentation for the method signature. The add-on just passes right through to sinon.

it('should construct the full-name of a user', function() {
    // define a request you are expecting the code to issue:
    this.respondWith('GET', '/users/1', [ 200, {}, {
        "first_name": "Ahmad",
        "last_name": "Amireh"
    var user = userCollection.fetch('1');
    // flush the request buffer, see below
    expect(user.fullName).toEqual('Ahmad Amireh');

respondWithJSON(method, url, response)

Like respondWith but assumes the body in the response is JSON and calls JSON.stringify() on it for you.


Flushes the request buffer by responding to all outstanding requests. You should do this after invoking code that you expect to have issued an XHR request.

You can also choose to have the server auto-respond by specifying so:

describe('my suite', function() {
    this.xhrSuite = {
        autoRespond: true

This really just proxies to fakeServer#respond.


You have access to the fake server object in this.server.

Mode 2: request tracking

Instead of defining the requests you expect in-advance, this mode allows you to run expectations on the requests themselves, e.g, to verify that your subject module is issuing the proper requests.

You can toggle this mode by defining this.xhrSuite = { trackRequests: true };. You will have access to a different set of helpers detailed below.

Example: verifying the module issues a GET request /users/1 first, and then another to /users/1/profile.

describe('my suite', function() {
    this.xhrSuite = {
        manualRequests: true
    it('should fetch the user, then his profile', function() {
        this.respondTo(this.lastRequest, 200, { "id": "1" });


this.requests is a stack which contains all the issued requests during the test. It is a container of FakeXMLHttpRequest objects.


this.lastRequest will point to the latest request received. It is an object of type FakeXMLHttpRequest.

respondTo(xhrRequest, statusCode, headers, body)

Respond to a request tracked in the this.requests stack. If you pass 3 arguments, body will be assumed to be the 3rd parameter, and the response will be set with the default headers.




DownloadsWeekly Downloads






Last publish


  • amireh