Mocha + BlanketJS + RequireJS, No method '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

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 2

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