Sinon fake server not working in chrome 42

[lukewilde]

After updating Chrome to version 42 the fake server seems to be letting requests slip past it.

Instead of being intercepted and returning their mock data my requests throw 404's.

I've confirmed the issue effects Windows and OSX. Prior to Chrome version 42 both work correctly, and break immediately after updating.

[gyandeeps]

I run chrome canary which is like 2 steps ahead for regular chrome. Everything works for me.
Can you share the code which does the fake server mocking.

[mroderick]

After updating Chrome to version 42 the fake server seems to be letting requests slip past it.

Instead of being intercepted and returning their mock data my requests throw 404's.

I've confirmed the issue effects Windows and OSX. Prior to Chrome version 42 both work correctly, and break immediately after updating.

Could you post some code that fails? Does it fail in other browsers?

[lukewilde]

Hey guys, I'm having trouble getting the code working on old versions of Chrome now. Perhaps I was mistaken. I've boiled down the code to the following:

var sinon = require('sinon');
var server = sinon.fakeServer.create();

var mockSuccessData =
    [ 200
    , { 'Content-Type': 'image/png' }
    , 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABAQMAAADD8p2OAAAAA1BMVEX/AP804Oa6AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=='
    ];

server.respondWith("GET", "/test-image", mockSuccessData);

var image = document.createElement("img");
image.src = "/test-image";

server.respond();

The above throws a 404. My tests are running in the browser via browserify, could this be complicating things?

Any insight you can provide would be great.

Thanks.

[hayesmaker]

+1, this times out:

    var expect = require('chai').expect,
    sinon = require('sinon');


 describe.only("Testing Sinon works cross browsers", function() {

var server = sinon.fakeServer.create();

var mockSuccessData =
    [ 200
        , { 'Content-Type': 'image/png' }
        , 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABAQMAAADD8p2OAAAAA1BMVEX/AP804Oa6AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=='
    ];

it("Test this works", function(done) {

    server.respondWith("GET", "/test-image", mockSuccessData);

    var image = document.createElement("img");
    image.src = "/test-image";

    server.respond(function(err, res) {
        console.log('err', err);
        console.log('res', res);
        expect(res).is.not.a('null');
        done();
    });
});
});

[mroderick]

@lukewilde, @hayesmaker how are you running the code examples?

[hayesmaker]

in a browser, using mocha

[hayesmaker]

this might be a more clear example of it not working:

               var chai = require('chai'),
expect = chai.expect,
sinon = require('sinon'),
sinonChai = require("sinon-chai"),
ServerInterface = require('../../../src/js/app/core/ServerInterface'),
GameData = require('../../../src/js/app/core/GameData'),
SignalDispatcher = require('../../../src/js/app/core/SignalDispatcher');

chai.use(sinonChai);

describe.only("Testing Sinon works cross browsers", function() {

var serverInterface, server, fakeData = [{
    someFake: "stuff"
}];

var mockSignalDispatcher = {
    spinRequested: {
        add: sinon.stub()
    }
};

before(function(){
    var gameData = sinon.createStubInstance(GameData);
    serverInterface = new ServerInterface(mockSignalDispatcher, gameData);
    server = sinon.fakeServer.create();
    server.respondWith(
        "GET",
        "/exampleSpin",
        [200, {"Content-Type": "application/json"}, JSON.stringify(fakeData)]
    )
});

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

it("ServerInterface is created", function() {
    expect(serverInterface).to.exist;
});

it("Can call the fakeServer", function() {
    var callback = sinon.spy();

    serverInterface.requestGaffeSpin('/exampleSpin', callback);

    server.respond();

    expect(callback).to.have.been.called;
});

});

[lukewilde]

While trying to boil down a simple set of replication steps it's actually tripping over because of our XHR request library fetch which must be doing something strange under the hood.

[mroderick]

While trying to boil down a simple set of replication steps it's actually tripping over because of our XHR request library fetch which must be doing something strange under the hood.

That is interesting, I look forward to seeing a reduced test case

[kruppel]

While trying to boil down a simple set of replication steps it's actually tripping over because of our XHR request library fetch which must be doing something strange under the hood.

@lukewilde window.fetch landed on Chrome stable as of 42, so sinon.fakeServer isn't going to serve you well. I've managed to work around it for the timebeing by forcing the shim, i.e. settings window.fetch = null before loading the fetch polyfill.

[taion]

As @kruppel mentioned, the reason these issues arise is because Chrome has shipped a native fetch implementation that doesn't use XHR.

I think the correct thing would be for Sinon to stub both XHR and native fetch.

I don't think disabling the native implementation and forcing the use of the polyfill for testing is good practice.

[vnabatov]

@taion, @kruppel

window.fetch = null

didn't help me, I still got 404 for code like

var sinon = require('sinon');
var server = sinon.fakeServer.create();
var mockSuccessData =
    [ 200
    , { 'Content-Type': 'image/png' }
    , 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABAQMAAADD8p2OAAAAA1BMVEX/AP804Oa6AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=='
    ];
server.respondWith("GET", "/test-image", mockSuccessData);

what else can be the problem?

Chrome 56.0.2924.87 (64-bit)
node 6.3.0
npm 3.10.3
karma 1.3.0
sinon 2.0.0-pre.4

[vnabatov]

may be the solution is to not to test this functionality?

[mroderick]

This seems to be related to testing things that use fetch, which Sinon does not provide a fake implementation of.

I would recommend using one of these libraries for faking fetch:

• fetch-mock
• fake-fetch

I am closing this, since it doesn't seem to be a problem with what IS provided by Sinon.

Feel free to re-open this, if you feel that I am mistaken. Bonus points for a simple, runable test case that shows the defect.