How to avoid introducing global leaks when using Squire.js with RequireJS and Mocha?

Question

I am writing a one-page JavaScript application using Backbone and Backbone.Marionette. I use AMD and RequireJS modules to help organize my code and manage dependencies. I also use Mocha as a testing framework for TDD / BDD.

Everything worked fine until I wanted to inject cigarette butts, mockery, and spies using Sinon.JS. After a lot of searching, I came across the test framework page on the WikiWiki and Squire.js wiki , which seemed to fit my needs. However, when I try to use Squire.js to load a module, Mocha unexpectedly reports global leaks for module dependencies. Report leaks if I download the module directly using Require.JS.

For example, the following test code does not call Mocha to report any leaks:

define(['app/app'], function(app) { describe('App', function() { it('Should define a \'header\' region', function() { expect(app.headerRegion).to.exist; }); it('Should define a \'main\' region', function() { expect(app.mainRegion).to.exist; }); }); return { name: "App" }; }); 

However, converting the code to use Squire.js as follows causes Mocha to report leaks for jQuery, Backbone, and Marionette (depending on app.js):

 define(['Squire'], function(Squire) { describe('App', function() { var testContext = {}; beforeEach(function(done) { testContext.injector = new Squire(); testContext.injector.require(['app/app'], function(app) { testContext.app = app; done(); }); }); it('Should define a \'header\' region', function() { expect(testContext.app.headerRegion).to.exist; }); it('Should define a \'main\' region', function() { expect(testContext.app.mainRegion).to.exist; }); }); return { name: "App" }; }); 

What am I doing wrong? I am completely puzzled that Mocha does not report a leak with RequireJS, but does it with Squire.js. I also tried some other solutions, which I found in another https://stackoverflow.com/a/3129609/ , such as a user-defined function and testr.js, prior to Squire.js, and similar results. To date, I have not been able to find an example that uses Mocha, RequireJS, and Sinon.JS together.

I posted my current code base on GitHub in case there is some important information that I missed or something like that. This test can be found in test \ spec \ test.app.js.

Any help is appreciated. I would love to walk past the monkeys with my test setup and actually work on my application. Thanks in advance.

Answer 1

After thinking about this, I realized that this is really the expected behavior and a side effect of the time when app.js loads for testing.

My tests are loaded via RequireJS into the require statement shown below

 require([ 'spec/test.smoketest', 'spec/test.app' ], runMocha); 

where runMocha is just a function that just calls mocha.run() .

It occurred to me that the way mocha is most likely to detect global leaks is to compare what is recorded worldwide before and after each test. In the first example above, where no leaks were reported, jQuery, Backbone, and Marionette are loaded by RequireJS before mocha.run () is called as part of loading the test.app.js module. On the other hand, jQuery, Backbone and Marionette are loaded as part of the tests themselves in the second example.

Thus, the first configuration does not report any leaks, since jQuery, Backbone and Marionette are already registered globally before calling mocha.run() . The second configuration reports leaks because they are logged during the tests.

Now that I understand what is happening and what is expected, it’s more convenient for me to configure Mocha to allow these global objects. This can be done in the Mocha configuration, as shown below:

 mocha.setup({ ui: "bdd", globals:["_", "$", "jQuery", "Backbone", "Marionette"] });