Ajax mocking. A SinonJS XHR wrapper for CasperJS.


Control Web UI application flow with fake XHR responses. Test your UI in isolation!. A CasperJS module that wraps the XHR faking abilities of SinonJS. For testing rich Ajax driven web applications.

An Ajax driven app can be tested in isolation by mocking or stubbing XHR interactions. Isolated tests are faster and more stable because they are less at risk from faults in external and peripheral dependencies such as server-side logic and network connectivity. PhantomXHR takes full control of the XHR layer, blocking all XHR requests to the server and reacting instead with responses defined by the test engineer within the test itself. PhantomXHR provides the freedom to exercise all code paths, like error handling, paths that would usually be nondeterministic.

  • npm install phantomxhr
  • bower install phantomxhr
  • `git clone git://
  • casperjs test demo/test.js
var xhr = require('./modules/phantomxhr.js');
xhr.init(, {
  libraryRoot: './modules'
  url: /object\/([0-9]+\?)/,
  responseBody: { /*my response*/ }

In the above case, if an API call to 'something/object/48546?' is requested by the JS app under test, the app will receive the given mocked response.

Note: Be careful when defining URL matches. Try to keep them specific otherwise you may find that the wrong XHR fake is responding.

Your fake response will expose the following methods to allow you to make various test assertions.

deleteRequest.first(); // get the first requestBody it intercepted 
deleteRequest.last(); // get the last requestBody it intercepted 
deleteRequest.nthRequest(6); // get the 6th requestBody it intercepted 
deleteRequest.count(); // get the number of requests made 

A mock will also return some useful methods for changing subsequent responses. This allows us to test retry user flows; say you want to test that a retry button appears after a 500, trying again and getting a 200 should remove the retry button.

var deleteRequest = xhr.fake({
  url: /object\/([0-9]+\?)/,
  method: 'delete',
  status: 500
  status: 200

This method will also let you return a different responseBody on a subsequent request, great for testing uploads.

var uploadRequest = xhr.fake({
  url: /object\/([0-9]+\?)\/upload/,
  method: 'post',
  holdResponse: true
// Progress of first 
uploadRequest.progress({ loaded: 25, total: 100 });
// Complete the first call 
uploadRequest.respond( /*optionalResponseOverride*/ );
// uploadRequest.nthProgress(2, { loaded: 25, total: 100 }); 
// uploadRequest.nthRespond(2, /*optionalResponseOverride*/ ); 

Created by James Cryer and the Huddle development team.