JavaScript: Mocking Window

When I code in JavaScript I try to avoid using the window or document objects as much as possible, but sometimes there’s just no getting around them. Bootstrapping data from a server (eg: WordPress’s wp_localize_script), manipulating the DOM directly (eg: jQuery), or listening to viewport resize events all require touching the global window object.

Why is this trouble? Because it makes testing a real challenge. The easiest code to test is a pure function, which generally means a function without side-effects, but it also means a function which gets all its data from its arguments and not from some overarching state. Any global variable, like window, is effectively global state.

Fortunately for us, it’s relatively easy to mock a window object. If you’re bootstrapping data, you can just use a plain object. If you’re doing DOM things, you can use a library like jsdom. But let’s say you have a bunch of modules all accessing window in different places? As soon as we start requiring those modules in our tests, we’ll see failures because window will be null.

My answer, as seems to be the case a lot these days, is dependency injection. That is, directly providing our window object to the code before it runs. It might be awkward to pass window to every function which might want to use it, so instead we can create a module something like the following:

var windowObj = null;

module.exports = {
    setWindow: function( newWindowObj ) {
        windowObj = newWindowObj;
    }

    getWindow: function() {
        if ( ! windowObj && ! window ) {
            throw new Error( 'No window object found.' );
        }
        return windowObj || window;
    }
};

Now in other modules that need a window we write:

var getWindow = require( './helpers/window' ).getWindow;

function getSomethingFromTheDOM() {
    return getWindow().document.querySelector( '.something' );
}

By itself, that will work just as well as using window directly, and when we want to test the code, we can write this in a test helper:

var jsdom = require( 'jsdom' ).jsdom;
var setWindow = require( './helpers/window' ).setWindow;
setWindow( jsdom().defaultView ); 

Now all the calls to getWindow() will use our mock window object instead.