Mocha + BlanketJS + RequireJS，沒有方法“ reporter”

Question

我正在將Mocha與RequireJS一起使用，並且測試運行良好，但是，當我嘗試添加覆蓋代碼范圍時，我遇到了Uncaught TypeError: Object #<HTMLDivElement> has no method 'reporter' ，

這是我正在運行的代碼：

<div id="mocha"></div>

<script src="../src/js/vendor/requirejs/require.js"></script>

<script src="../src/js/vendor/blanket/dist/qunit/blanket.js"
data-cover-adapter="../src/js/vendor/blanket/src/adapters/mocha-blanket.js"></script>

<script src="SpecRunner.js" data-cover></script>

和我的specrunner：

require(["../src/js/require-config.js"], function () {

// Set testing config
require.config({
    baseUrl: "../src/js",
    paths: {
        "mocha": "vendor/mocha/mocha",
        "chai": "vendor/chai/chai"
    },
    urlArgs: "bust=" + (new Date()).getTime()
});

require([
    "require",
    "chai",
    "mocha"
], function (require, chai) {
    var should = chai.should();
    mocha.setup("bdd");

    require([
        "specs.js",
    ], function(require) {
        if (window.mochaPhantomJS) {
            mochaPhantomJS.run();
        } else {
            mocha.run();
        }
    });

});

});

就像我說的-我的測試都運行良好，我只是想不出為什么毯子不起作用。

更新：

我可以通過在開始時包含mocha的腳本標簽來使其運行，但是，現在它運行了兩次mocha測試。

Answer 1

您使用RequireJS的方式存在問題。 如果使用RequireJS加載代碼並使用<script>標記加載代碼，並且：

• 這兩套代碼彼此不依賴，因此您可以按任何順序加載它們。

• 用<script>加載的代碼取決於RequireJS加載的代碼，然后您應將<script>加載的代碼轉換為RequireJS加載。 如果不這樣做，則會遇到間歇性故障。

• RequireJS加載的代碼取決於<script>加載的代碼，然后必須先加載並執行<script>加載的代碼，然后再開始使用RequireJS加載代碼。

通過查看Blanket的文檔，我確定您的情況是第二個。 在開始使用RequireJS加載模塊之前，先加載Blanket適配器，但是適配器希望Mocha 已經存在。

您將不得不使用墊片 。 我不確定您使用的是什么墊片（因為我不使用橡皮布），但是類似這樣的方法應該可以在正確的方向上為您提供幫助：

shim: {
    "blanket": {
        exports: "blanket"
    },
    "mocha-blanket": ["mocha", "blanket"]
}

顯然， "blanket"和"mocha-blanket" "blanket"的名稱必須適合您的情況。 我認為適配器本身不需要具有exports值，因為適配器將自身附加到Mocha而不是在全局空間中導出某些內容。

Answer 2

我弄清楚了，並寫了一篇有關讓Blanket與AMD的Mocha一起工作的文章。 這是一篇博客文章，概述了該過程以及帶有工作代碼的回購 。

我正在使用以下內容加載測試：

require(["../src/js/require-config"], function () {

  require.config({
    baseUrl: "../src/js",
    paths: {
        chai: "vendor/chai/chai"
    }
  });

  require([
    "chai"
  ], function (chai) {
    chai.should();
    window.expect = chai.expect;
    mocha.setup("bdd");

    require([
        "specs.js"
    ], function () {
        mocha.run();
    });
  });

});

然后頁面上的以下代碼：

<div id="mocha"></div>

<script src="../src/js/vendor/mocha/mocha.js"></script>

<script data-main="main-tests" src="../src/js/vendor/requirejs/require.js"></script>

<script src="../src/js/vendor/blanket/dist/qunit/blanket.js" data-cover-only="../src/js/component"></script>
<script type="text/javascript" src="../node_modules/grunt-blanket-mocha/support/mocha-blanket.js"></script>

<script>
/* global blanket */
if (window.PHANTOMJS) {
    blanket.options("reporter", "../node_modules/grunt-blanket-mocha/support/grunt-reporter.js");
}
</script>

Answer 3

從毯子發布的摩卡適配器不起作用。

使用Bower bower install blanket#master --save-dev尚未發布的版本

另外，腳本包含順序也很重要

<script src="mocha.js"></script>
<script>mocha.setup('bdd');</script>
<script data-main="config.js" src="../bower_components/requirejs/require.js"></script>
<script src="../bower_components/blanket/dist/qunit/blanket.js" data-cover-never="bower_components"></script>
<script src="../bower_components/blanket/src/adapters/mocha-blanket.js"></script>