Jasmine + JSTestDriver + Coverage + RequireJS

Question

Wow, what a mess. This is the scenario.

• Backbone driven JS app.

• RequireJS for AMD functionality, initialized like this:

  <script data-main="js/main" src="js/require.js" type="text/javascript"></script>
  

  then inside main.js the following config code:

  require.config(
  {
      paths:
      {
          ... : ...
      }
  });
  

  Each Backbone View/Model/Router is a "define(...)" module, and "require("theOneRouter", ...)" is called once in main.js.

• r.js used as optimizer with Uglify/Closure. One 'compiled' main.js is created in a ./release subfolder which I pick dynamically within my .net framework.

• Took quite a while to get the Backbone + Require.JS to work, but works great now!

• Then slapping Jasmine on top of that also took a little custom work, but it worked just fine. I had to load require.js from my SpecRunner.html, define each test module as an AMD using require's define(...) call, and I instantiate & run Jasmine once from a call to require's require(...) call once in the SpecRunner.html:

  require(
  [
  //"test/specs/testSpec1",
  "test/specs/views"
  ],
  function ()
  {
      jasmine.getEnv().updateInterval = 1000;
      var reporter = new jasmine.TrivialReporter();
      jasmine.getEnv().addReporter(reporter);
      ....
      ....
  });
  

  this too works great. Tests load & run, no issues. Require takes care of everything.

Now, I would like a framework like JSTestDriver to act as my runner. I've chosen JSTD for it's simplicity, ability to test on remote browsers, code coverage support, but am still open for other suggestions.

JSTestDriver per se works fine, the only problem I have is running the combination JSTD + Jasmine + ReuireJS together. The biggest issue being, if I tell JSTD in the config file about a Jasmine/Require test module in order to load it, I get the following error:

http://requirejs.org/docs/errors.html#mismatch

If I use r.js to optmize all my code into one main.js, the combination works, including Coverage, but coverage is collected on one gigantic file and hard to analyze. Not to mention it takes very long to instrument a 50k-lines-of-code js file and to run it via JSTD.

I tried creating a fixture-like js file that loads all my Jasmine test modules & code modules, but I keep returning to the above "mismatch" error, AND, if I don't tell JSTD about each module individually (by loading an html/js fixture that does the real loading) they won't get instrumented for code coverage.

Has anyone gotten this specific combination to work? Maybe I'm asking for too much...

Answer 1

The solution is exactly as devadvocate mentioned. Because JsTestDriver and Require.js are competing to be the ones to manage the loading of files/dependencies, JsTestDriver throws a fit when you try to do it 100% the Require.js way (with anonymous modules and defines). Instead you have to name your modules and use require([...], function(...) {... instead of define([...]. I wrote a post that shows how to integrate QUnit, Requirejs, and code coverage with JSTD: js-test-driver+qunit+coverage+requirejs. I use QUnit in my example, but you can easily substitute QUnit for Jasmine. In trying to figure this out I considered just using PhantomJS, but for our user base it is essential that we have cross-browser testing, IE7,IE8,IE9, etc., so a single WebKit wouldn't cut it. JsTestDriver is very useful, but I'm afraid poor documentation turns developers away. Soon I'll get the code for my example up on GitHub. Hope this helps.

Answer 2

I was not able to get this to work and ended up using PhantomJS to run my jasmine tests. http://phantomjs.org/

Answer 3

Have you tried naming your modules under test and using require instead of define in your tests?

https://github.com/podefr/jasmine-reqjs-jstd

Edit:

I just released an open source toolkit which will hopefully help others as much as it helps me. It is a composition of many open source tools which gives you a working requirejs backbone app out of the box.

It provides single commands to run: dev web server, jasmine single browser test runner, jasmine js-test-driver multi browser test runner, and concatenization/minification for JavaScript and CSS. It also outputs an unminified version of your app for production debugging, precompiles your handlebar templates, and supports internationalization. No setup is required. It just works.

It also supports unnamed modules under test.

http://github.com/davidjnelson/agilejs