Why do I see “define not defined” when running a Mocha test with RequireJS?

Question

I am trying to understand how to develop stand-alone Javascript code. I want to write Javscript code with tests and modules, running from the command line. So I have insta

Answer 1

Just in case David's answer was not clear enough, I just needed to add this:

if (typeof define !== 'function') {
    var define = require('amdefine')(module);
}

To the top of the js file where I use define, as described in RequireJS docs ("Building node modules with AMD or RequireJS") and in the same folder add the amdefine package:

npm install amdefine

This creates the node_modules folder with the amdefine module inside.

Answer 2

The reason your test isn't running is because src/utils.js is not a valid Node.js library.

According to the RequireJS documentation, in order to co-exist with Node.js and the CommonJS require standard, you need to add a bit of boilerplate to the top of your src/utils.js file so RequireJS's define function is loaded.

However, since RequireJS was designed to be able to require "classic" web browser-oriented source code, I tend to use the following pattern with my Node.js libraries that I also want running in the browser:

if(typeof require != 'undefined') {
    // Require server-side-specific modules
}

// Insert code here

if(typeof module != 'undefined') {
    module.exports = whateverImExporting;
}

This has the advantage of not requiring an extra library for other Node.js users and generally works well with RequireJS on the client.

Once you get your code running in Node.js, you can start testing. I personally still prefer expresso over mocha, even though its the successor test framework.

Answer 3

You are trying to run JS modules designed for browsers (AMD), but in the backend it might not work (as modules are loaded the commonjs way). Because of this, you will face two issues:

1. define is not defined
2. 0 tests run

In the browserdefine will be defined. It will be set when you require something with requirejs. But nodejs loads modules the commonjs way. define in this case is not defined. But it will be defined when we require with requirejs!

This means that now we are requiring code asynchronously, and it brings the second problem, a problem with async execution. https://github.com/mochajs/mocha/issues/362

Here is a full working example. Look that I had to configure requirejs (amd) to load the modules, we are not using require (node/commonjs) to load our modules.

> cat $PROJECT_HOME/test/test.js

var requirejs = require('requirejs');
var path = require('path')
var project_directory = path.resolve(__dirname, '..')

requirejs.config({
  nodeRequire: require, 
  paths: {
    'widget': project_directory + '/src/js/some/widget'
  }
});

describe("Mocha needs one test in order to wait on requirejs tests", function() {
  it('should wait for other tests', function(){
    require('assert').ok(true);
  });
});


requirejs(['widget/viewModel', 'assert'], function(model, assert){

  describe('MyViewModel', function() {
    it("should be 4 when 2", function () {
        assert.equal(model.square(2),4)
    })
  });

})

And for the module that you want to test:

> cat $PROJECT_HOME/src/js/some/widget/viewModel.js

define(["knockout"], function (ko) {

    function VideModel() {
        var self = this;

        self.square = function(n){
            return n*n;
        }

    }

    return new VideModel();
})

Answer 4

The Mocha documentation is lacking on how to set this stuff up, and it's perplexing to figure out because of all the magic tricks it does under the hood.

I found the keys to getting browser files using require.js to work in Mocha under Node: Mocha has to have the files added to its suites with addFile:

mocha.addFile('lib/tests/Main_spec_node');

And second, use beforeEach with the optional callback to load your modules asynchronously:

describe('Testing "Other"', function(done){
    var Other;
    beforeEach(function(done){
        requirejs(['lib/Other'], function(_File){
            Other = _File;
            done(); // #1 Other Suite will run after this is called
        });
    });

    describe('#1 Other Suite:', function(){
        it('Other.test', function(){
            chai.expect(Other.test).to.equal(true);
        });
    });
});

I created a bootstrap for how to get this all working: https://github.com/clubajax/mocha-bootstrap

Answer 5

I don't use requirejs so I'm not sure what that syntax looks like, but this is what I do to run code both within node and the browser:

For imports, determine if we are running in node or the browser:

var root =  typeof exports !== "undefined" && exports !== null ? exports : window;

Then we can grab any dependencies correctly (they will either be available already if in the browser or we use require):

var foo = root.foo;
if (!foo && (typeof require !== 'undefined')) {
    foo = require('./foo');
}

var Bar = function() {
    // do something with foo
}

And then any functionality that needs to be used by other files, we export it to root:

root.bar = Bar;

As for examples, GitHub is a great source. Just go and check out the code for your favorite library to see how they did it :) I used mocha to test a javascript library that can be used in both the browser and node. The code is available at https://github.com/bunkat/later.