A simple JavaScript stubbing function


If you are looking for a full featured JavaScript stubbing/mocking library you will be thoroughly disappointed by this post. There are many really good and full featured frameworks for this such as QMock , JSMock and my current personal favorite Sinon.JS.  However, if you want to see a super simple and useful JavaScript stubbing function in less than 20 lines of code you are in luck.  This function (aptly called stub) does all you need to stub out methods on an object.  You can see how many times a method was called and what is was called with.

Here’s the code:

function stub() {
    return {
        of : function (name, callback, returnValue) {
            this[name] = function () {
              var args = Array.prototype.slice.call(arguments);
              var ret = null;
                  ret = callback.apply(this, args);
              if(returnValue) return returnValue;
              return ret;
          this[name].calls = [];

          return this;



To show how to use this stubbing function take a look at the following function and test case which show some code which uses the HTML Canvas context object to draw and translate a blue sqaure.


test("will render blue square and translate right 50px", function() {
   var context = stub().of("fillRect")

   renderBlueSquareAndTranslate(10,10, context);

   equal(context.fillRect.calls.length, 1);
   equal(context.translate.calls[0][0], 50);
   equal(context.translate.calls[0][1], 0);
   equal(context.fillStyle, "#0000FF");


function renderBlueSquareAndTranslate(height,width, context) {
    context.fillStyle = "#0000FF";



Below are the unit tests I wrote for the stubbing function:

  • Stub a method called “action”, assert that it was called twice and assert that the right values were passed to it in each call.
test("will capture call arguments for multiple calls", function() {
   var s = stub().of("action");



  • Stub a method called “action”,  assert callback is invoked when “action” is called and use the callback’s return value as “action”’s return value.
test("will invoke callback with arguments", function() {
   var arg0, arg1;
   var callback = function() { arg0 = arguments[0]; arg1 = arguments[1]; return 10;};
   var s = stub().of("action", callback);

   var res = s.action("matt", 8);


  • Stub a method called “action” and use given return value as “action”’s return when no callback is specified.
test("will use returnVal over return value of callback", function() {
   var arg0, arg1;
   var callback = function() { arg0 = arguments[0]; arg1 = arguments[1]; return 5;};
   var s = stub().of("action", callback, 10);

   var res = s.action("matt", 8);


  • Stub a method called “action” and a method called “other” and assert only “action” is called.
test("will stub multiple methods and test only one is called", function() {
   var s = stub().of("action").of("other");


This entry was posted in JavaScript, Testing. Bookmark the permalink.

5 Responses to A simple JavaScript stubbing function

  1. Pingback: A simple JavaScript stubbing function

  2. Carlos Ble says:

    You have written a spy object which is able to stub out methods. A better name for this function would be spy, rather than stub. The API to use it doesn’t look very comfortable but thanks for sharing :-)

  3. Matthew says:

    Thanks for the comment Carlos. I do agree, my use of stub here would be better replaced with the word spy, since the main functionality is that of a test spy.

    As for the API design. I was aiming for a minimalist design (hence only 18 lines of code) but I am curious what you would think would make the interface better. I used this code on a couple small projects and it seemed comfortable to me but I am very biased :)

  4. Pingback: Mock Objecs: Links, News and Resources (1) « Angel “Java” Lopez on Blog

  5. Pingback: Javascript: Links, News, Resources (2) « Angel “Java” Lopez on Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>