Mocha + BlanketJS + RequireJS，没有方法'reporter'答案

【问题标题】：Mocha + BlanketJS + RequireJS, No method 'reporter'Mocha + BlanketJS + RequireJS，没有方法'reporter'
【发布时间】：2013-12-24 03:02:35
【问题描述】：

我正在将 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>

和我的规范者：

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 测试。

【问题讨论】：

标签： javascript requirejs code-coverage mocha.js blanket.js

【解决方案1】：

您使用 RequireJS 的方式存在问题。如果您使用 RequireJS 加载代码并使用 <script> 标签加载代码，并且：

两组代码互不依赖，可以任意顺序加载。
<script>加载的代码依赖于RequireJS加载的代码，那么你应该将<script>加载的代码转换成RequireJS加载。如果不这样做，就会遇到间歇性故障。
RequireJS 加载的代码取决于<script> 加载的代码，那么<script> 加载的代码必须先加载并执行，然后才能开始使用RequireJS 加载代码。

通过查看 Blanket 的文档，我确定您的情况是第二个。在开始使用 RequireJS 加载模块之前加载 Blanket 适配器，但适配器希望 Mocha已经存在。

您必须使用shim。我无法确定您使用的确切垫片（因为我不使用毯子），但这样的事情应该可以帮助您朝着正确的方向前进：

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

显然"blanket" 和"mocha-blanket" 的名称必须适应您的情况。我认为适配器本身不需要 exports 值，因为适配器会将自身附加到 Mocha 而不是在全局空间中导出某些内容。

【讨论】：

【解决方案2】：

我想通了，并写了一篇关于让 Blanket 在 AMD 中与 Mocha 合作的文章。 Here's a blog post 概述了流程以及repo with the working code。

我正在使用以下内容来加载我的测试：

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>

【讨论】：

【解决方案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>

【讨论】：