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

Question

I'm using Mocha with RequireJS and tests are running fine, however, when I try to add in blanket code coverage I'm getting Uncaught TypeError: Object #<HTMLDivElement> has no method 'reporter' ,

Here's the code I'm running:

<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>

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

});

});

Like I said - my tests are all running fine, I just can't figure out why blanket's not working.

Update:

I can get it to run by including the script tag for mocha at the beginning, however, now it runs the mocha tests twice.

Answer 1

There's a problem with how you use RequireJS. If you load code with RequireJS and load code with <script> tags, and:

• The two sets of code are not dependent on one another, then you can load them in any order.

• The code loaded with <script> depends on code loaded by RequireJS, then you should convert the code loaded with <script> to be loaded with RequireJS. If you do not do this, you run into intermittent failures.

• The code loaded with RequireJS depends on the code loaded with <script> , then the code loaded with <script> must load and execute before you start loading code with RequireJS.

From looking at the documentation for Blanket, I determine that your case is the second. You load the Blanket adapter before you start loading modules with RequireJS, but the adapter wants Mocha to be present already .

You will have to use a shim . I can't be certain of the exact shim you use (because I don't use blanket) but something like this should help you in the right direction:

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

Obviously the names "blanket" and "mocha-blanket" have to be adapted to your situation. I do not see a need to have an exports value on the adapter itself since the adapter attaches itself to Mocha rather than export something in the global space.

Answer 2

I figured it out and did a write-up on getting Blanket to work with Mocha in AMD. Here's a blog post outlining the process as well as a repo with the working code .

I'm using the following to load my tests:

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

});

And then the following code on the page:

<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

The published mocha adapter from blanket does not works.

Install the not yet released version with bower bower install blanket#master --save-dev

Also, the order of scripts inclusion matter

<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>