"文件未定义"使用外部库依赖的Jasmine导入ES6(Babel)

时间:2016-09-25 20:24:55

标签: javascript unit-testing jasmine ecmascript-6 babeljs

在使用外部库时,我无法解决如何设置单元测试套件的问题。我在这种情况下使用的库是Phaser。这是我的两个简单的app模块。

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;

测试套件

我正在使用:Jasmine(节点中的cli)。我并不特别想要使用像Karma这样的东西,但如果它是使事情发挥作用的唯一方法的话。

这是我的应用规范:

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();
        });
    });
});

运行测试

我通过npm脚本运行测试,通过babel(不确定实际上这里发生了什么。也许有人可以帮助我解释一下):

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

所以它编译了所有内容,然后运行测试:

问题

当我运行测试时,我得到:

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)

问题1

我是否正确设计项目?我觉得像Phaser.js应该被嘲笑或遗漏主要代码一些如何?特别是如果它引用document。这里的任何帮助将不胜感激。随意给我发一个链接,帮助我将外部图书馆实现到带有测试套件的Web应用程序中。

问题2

此处babel-node --presets es2015是否相关?我不太清楚它在做什么。

1 个答案:

答案 0 :(得分:0)

1)当您将jasmine与节点一起使用时,您的测试将在节点环境中运行。节点中没有窗口或文档。这些对象仅在浏览器中可用。幸运的是,你可以使用jsdom来模拟它们。

另外,您可以查看this文章,了解如何设置测试环境。

2)Babel预设是相关的。预设只是一种配置和/或插件。如果您只想使用ECMAScript的稳定功能,请考虑使用preset-es2015;如果您想要前沿和不稳定的功能,请考虑使用preset-stage-0

祝你好运!