"document is not defined" ES6 import with Jasmine with External Library dependicies (Babel)

Question

I'm having trouble working out how to set up a unit testing suite when using external libraries. The library I'm using in this case is Phaser. Here are my two simple app modules.

App.js

// App.js - will be used to init the app
import Game from './Game';

const app = {
    initialize: function () {
        this.start();
    },
    start: function () {
        new Game();
    }
};

export default app;

Game.js

// Game.js - used to build out a Phaser Game
// chosen to use classes in this case. (not sure if relevant)
import Phaser from '../libs/phaser/phaser.min';

class Game extends Phaser.Game {

    constructor() {
        super(500, 500, Phaser.AUTO, 'content', null);
    }
}

export default Game;

The test suite

I am using: Jasmine (cli in node). I don't particularly want to have to use something like Karma, but will if it's the only way to get things working.

Here's my app spec:

import app from "app";

describe("App", function() {

    describe("when app is started", function() {

        beforeEach(function () {

            app.initialize();
        });

        it("expect application to start after initialization", function() {
            expect(app.start).toHaveBeenCalled();
        });
    });
});

Running the test

I'm running the test via npm script, via babel (not sure actually what is happening here. Maybe someone can help me shed some light on this):

babel-node --presets es2015 ./node_modules/.bin/jasmine

So it's compiling everything, then running the test:

The issue

When I run the test I get:

ReferenceError: document is not defined
    at Object.create (/Users/auser/Code/games/test/libs/phaser/phaser.min.js:7:10242)
    at new b.CanvasBuffer (/Users/auser/Code/games/test/libs/phaser/phaser.min.js:8:22106)
    at Function.b.CanvasTinter.checkInverseAlpha (/Users/auser/Code/games/test/libs/phaser/phaser.min.js:8:24223)
    at /Users/auser/Code/games/test/libs/phaser/phaser.min.js:8:24598
    at Object.<anonymous> (/Users/healy/Code/games/test/libs/phaser/phaser.min.js:9:15244)
    at Module._compile (module.js:425:26)
    at loader (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:146:5)
    at Object.require.extensions.(anonymous function) [as .js] (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:156:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)

Question 1

Am I setting up the project right? I feel like Phaser.js should be mocked or left out the main code some how? Especially if it's referencing document. Any help here would be much appreciated. Feel free to send me a link to help me implementing external libraies into a web app with a test suite.

Question 2

Is the babel-node --presets es2015 relevant here? I'm not too sure what it's doing.

Answer 1

1) When you use jasmine with node, your tests are run in node environment. There is no window or document in node. Those objects are available only in browser. Luckily, you can mock them using jsdom.

Also, you can see this article to find out how to set test environment up.

2) Babel preset is relevant. Preset is just kind of config and/or plugin. Consider using preset-es2015 if you want to use only stable features of ECMAScript, or preset-stage-0 if you want bleeding-edge and unstable features.

Good luck!