Sinon FakeServer not working in Mocha

Question

I'm trying to setup a test for an API call. I am creating the fake server in the before method and to test basic implementation I am using $.ajax versus my actual api call. However at no point do I see any requests in server.requests. My ajax call fires the error method with cannot call method open of undefined. I'm importing Sinon, sinonFakeHttps and sinonFakeServer. What am I missing. Spent 2 days in forums with no luck

Here's my code.

    describe('Warehouse Row', function (){
        before(function(){
            server = sinon.fakeServer.create();
            server.autoRespond = true;

        });
        after(function(){
            server.restore();
        });

        beforeEach(function(){
            sut = new Sut();
            sut.start();

        });
        it('should exist', function(){
            should.exist(sut);
        });

        it('setting value to positive int should validate',function(done){

            server.respondWith(200, { 'Content-Type': 'application/json' },'{ "stuff": "is", "awesome": "in here" }');


            var callback = sinon.spy();

            $.ajax({
                url: '/something',
                success: function(){
                    callback();
                    callback.should.have.been.called;
                    done();
                },
                error : function(err){
                    console.log(err);
                }
            });
      });

Answer 1

I had this same issue. I was setting up the Sinon fake server exactly as it should be (using Mocha and Chai, testing a Backbone app), but I was getting the error:

statusText: "TypeError: Cannot call method 'open' of undefined"

The issue was that I was using the Bower Sinon distribution, which for some reason does not seem to work properly (for one, fakeServer has to be required separately and does not automatically load its own dependencies).

I switched to a CDN version which seems to be more complete (at http://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.7.3/sinon-min.js) and that fixed things.

For reference, the code for the tests:

require([
    '../js/vendor/bower/chai/chai',
    '../js/vendor/bower/mocha/mocha',

    // Originally was:
    // '../js/vendor/bower/sinon/lib/sinon',
    // '../js/vendor/bower/sinon/lib/sinon/util/fake_xml_http_request',
    // '../js/vendor/bower/sinon/lib/sinon/util/fake_server',

    // Changed to:
    'http://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.7.3/sinon-min.js'
],
function(chai) {
    mocha.setup('bdd');

    var expect = chai.expect;
    mocha.setup({
        ui: 'bdd',
        bail: false
    });

    require(['app'],
    function(App) {
        describe('App.Models.Question', function() {
            var server, question;

            beforeEach(function() {
                question = new App.Models.Question();

                server = sinon.fakeServer.create();
                server.autoRespond = true;
            });

            afterEach(function() {
                server.restore();
            });

            it('can be saved', function(done) {
                server.respondWith([200, { 'Content-Type': 'application/json' },'{"status":"200"}']);

                var cb = function(success) {
                        expect(success).to.be.ok;
                        done();
                    }
                question.save(null, {
                    success: function(model, resp) {
                        cb(true);
                    },
                    error: function(model, resp) {
                        cb(false);
                    }
                });
            });
        });
    });
});

Answer 2

I see one problem at least with your code, which is that you are not calling server.respondWith with an array. Try replacing that line with the following:

server.respondWith([200, { 'Content-Type': 'application/json' },'{ "stuff": "is", "awesome": "in here" }']);

I created a fiddle that seems to work.