Combining Mocha, BlanketJS, and RequireJS has resulted in the error message "No method 'reporter'."

Question

Combining Mocha, BlanketJS, and RequireJS has resulted in the error message "No method 'reporter'."

While using Mocha with RequireJS, my tests are running smoothly. However, I encountered an issue when trying to incorporate blanket code coverage. The error

Uncaught TypeError: Object #<HTMLDivElement> has no method 'reporter'

keeps popping up.

Below is the code snippet that I am executing:

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

Here's a glimpse of 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();
        }
    });

});

});

Although my tests are functioning correctly, I’m struggling to understand why blanket is not cooperating.

Update:

I managed to make it work by including the script tag for mocha at the beginning. However, this resulted in the mocha tests running twice.

javascript requirejs code-coverage mocha.js blanket.js

Answer 1

Answer №1

It appears there is an issue with the usage of RequireJS in your code. If you are loading code both with RequireJS and traditional <script> tags, here's how to handle it:

If the two sets of code are independent of each other, feel free to load them in any order.
If the code loaded via <script> relies on RequireJS-loaded code, convert it to be loaded via RequireJS to avoid potential intermittent failures.
If the requireJS-loaded code depends on the <script>-loaded code, ensure the latter loads and executes before initiating RequireJS code loading.

After reviewing Blanket's documentation, it seems that your scenario resembles the second case. You're loading the Blanket adapter before RequireJS modules, but the adapter requires Mocha to already be present.

To address this, consider using a shim. While I can't provide the specific shim since I'm not familiar with Blanket, a configuration like the following may guide you:

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

Note that you should adjust the names 'blanket' and 'mocha-blanket' to match your setup. The Blanket adapter likely doesn't need an 'exports' value as it attaches itself to Mocha instead of exporting globally.

Answer 2

It appears there is an issue with the usage of RequireJS in your code. If you are loading code both with RequireJS and traditional <script> tags, here's how to handle it:

If the two sets of code are independent of each other, feel free to load them in any order.
If the code loaded via <script> relies on RequireJS-loaded code, convert it to be loaded via RequireJS to avoid potential intermittent failures.
If the requireJS-loaded code depends on the <script>-loaded code, ensure the latter loads and executes before initiating RequireJS code loading.

After reviewing Blanket's documentation, it seems that your scenario resembles the second case. You're loading the Blanket adapter before RequireJS modules, but the adapter requires Mocha to already be present.

To address this, consider using a shim. While I can't provide the specific shim since I'm not familiar with Blanket, a configuration like the following may guide you:

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

Note that you should adjust the names 'blanket' and 'mocha-blanket' to match your setup. The Blanket adapter likely doesn't need an 'exports' value as it attaches itself to Mocha instead of exporting globally.

Answer 3

Answer №2

I successfully resolved the issue and documented the procedure for integrating Blanket with Mocha in an AMD environment. You can find a detailed explanation in this blog post along with a repository containing the functional code available here.

The approach I am using to load my tests is as follows:

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

});

Additionally, the following code is implemented on the webpage:

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

I successfully resolved the issue and documented the procedure for integrating Blanket with Mocha in an AMD environment. You can find a detailed explanation in this blog post along with a repository containing the functional code available here.

The approach I am using to load my tests is as follows:

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

});

Additionally, the following code is implemented on the webpage:

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

Answer №3

The currently available mocha adapter from blanket is not functioning properly.

To resolve this issue, you can install the upcoming version using bower

bower install blanket#master --save-dev

It is important to pay attention to the order in which scripts are included

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

Answer 6

The currently available mocha adapter from blanket is not functioning properly.

To resolve this issue, you can install the upcoming version using bower

bower install blanket#master --save-dev

It is important to pay attention to the order in which scripts are included

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

Combining Mocha, BlanketJS, and RequireJS has resulted in the error message "No method 'reporter'."

Answer №1

Answer №2

Answer №3

Similar questions

Hover over the sprites using the "spritely" plugin to see the magic unfold

The error message 'Cannot read property 'navigate' of undefined' is displayed because the function '_this.props.navigation.navigate' is not

Transform various tables enclosed in separate div elements into sortable and filterable tables

The `XMLHttpRequest.prototype.open` function does not capture every single HTTP request visible in the chrome-dev-tools

What is the process for configuring NextJS to recognize and handle multiple dynamic routes?

Unable to smoothly expand Div in React using Tailwind

Design an interactive div element that allows users to modify its content, by placing a span

Vue.js application failing to display images fetched from the server

JavaScript: Utilize MooTools to extract a string containing a specific class and then pass it through a parent function

The MaterialTable is unable to display any data

Retrieving modified object values in Node.js - A comprehensive guide

Ways to extract text from a temporary element

Unable to make a POST request to the GitHub v3 API

resolving conflicts between Rails and JavaScript assets

Animating elements within Firefox can sometimes cause adjacent elements to shift positions

When adding values, they remain in their original positions

Sending JSON Data from C# to External JavaScript File without Using a Web Server

How can VueJs effectively update the data fetched using the created function?

Only if there is an update in the SQL database, I wish to refresh the div

Is it possible to merge several blobs into one zip file using JSzip?