CODEWITHSUNDEEP
jqueryunit-testingreactjsmocha.jssinon
frogbandit
frogbandit

Reputation: 571

Sinon Fakeserver Testing Different Component/File - No Requests?

I'm testing a React component using Mocha/Chai/Sinon and calling an AJAX request in a different file, using something like renderedComponent.getTodos(callback). I'm passing in a callback similar to this Sinon FakeServer tutorial. However, I'm getting a strange Syntax error, which causes the callback to not be called, and thus server.requests is empty.

I'm aware that I asked a similar question here - however, this issue that's different here is that I'm calling the AJAX request in a different file, rather than the same file, and now the solution that worked before is no longer working. I'm not sure why. In general, my question is: Is there something about including a function in a different file that causes Sinon to fail to be loaded in my JSDOM instance?

For reference, here is my renderedComponent initialization and FakeServer code, sitting in my testing file:

test.js

renderedComponent = ReactTestUtils.renderIntoDocument(
      <Component...>
        <p>Drag &amp; drop files here or click here to browse for files.</p>
      </Component> 


... 

describe('Testing', function(){
    var server;

    before(function () { server = sinon.fakeServer.create(); });
    after(function () { server.restore(); });

    it("calls callback with deserialized data", function () {
        var callback = sinon.spy();
        renderedComponent.getTodos(callback);

        // This is part of the FakeXMLHttpRequest API
        server.requests[0].respond(
            200,
            { "Content-Type": "application/json" },
            JSON.stringify([{ id: 1, text: "Provide examples", done: true }])
        );

        assert(callback.calledOnce);
    });

And here is the serverRequest function in renderedComponent, which is a React component in a different file that I'm trying to test:

Component.js

var Component = React.createClass({

...

    function getTodoscallback) {
        $.ajax({
             url: "/todo/items",
             success: function (data) {
                 // Node-style CPS: callback(err, data)
                 callback(null, data);
             }
        });
    }
}

Adding an error parameter to the AJAX request reveals the Syntax error from the jsdom node module trying to do urlObj = new URL(uri, documentBaseURLSerialized(this._ownerDocument));

My hunch is that this has to do with JSDom loading jQuery and Sinon, but beyond that I have no idea -- I would appreciate any help.

Upvotes: 1

Views: 298

Answers (1)

frogbandit
frogbandit

Reputation: 571

Well, I managed to solve it with this setup:

import jsdom from 'jsdom';
import _$ from 'jquery';

global.jsdom = jsdom.jsdom;
global.document = global.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
global.XMLHttpRequest = global.window.XMLHttpRequest;
global.navigator = window.navigator;

global.sinon = require('sinon');
global.sinon.useFakeXMLHttpRequest();

global.window.XMLHttpRequest = global.XMLHttpRequest;
global.$ = _$(global.window);

The issue looks to be that I needed to set both jQuery and sinon as global variables. Still not completely sure, but thankful that it's working.

Upvotes: 0

Related Questions