javascript - "document is not defined"使用具有外部库依赖项的 Jasmine 导入 ES6 (Babel)

Question

我在使用外部库时无法确定如何设置单元测试套件。我在本例中使用的库是 Phaser。这是我的两个简单的应用程序模块。

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;

游戏.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 应该被 mock 或忽略主要代码？特别是当它引用文档时。任何帮助将不胜感激。请随时向我发送一个链接，以帮助我使用测试套件将外部库实现到 Web 应用程序中。

问题 2

babel-node --presets es2015 与这里相关吗？我不太确定它在做什么。

Answer 1

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

此外，您还可以看到this文章了解如何设置测试环境。

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

祝你好运!