Deadly combination: Karma + RequireJS + Jasmine + Ace

Matas Šeimys

Matas Šeimys

— 1 min read

This caused some troubles for me, so I am sharing it -- to save someone else's precious time. Of course, solving problems is always rewarding in experience :)

Scenario

I want to write a JavaScript module, which would be using Ace Editor. I decide to do it using TDD, together with all the tools of modern web developer: npm, Bower, RequireJS, Karma Test Runner, Jasmine testing framework and either Grunt or Gulp (haven't got to that part). I started by simple package installation:

bower install ace

Added everything it to my test-main.js (which I created through karma init  wizard):

require.config({
  ...
  paths: {
    jquery: 'lib/jquery/dist/jquery.min',
    ace: 'lib/ace/lib/ace'
  },
  ...
});

Note: lib is my directory for files installed by Bower, you can set it by creating .bowerrc file in root folder and adding simple line:

{
  "directory" : "lib"
}

The Problem

When all is set, we launch  karma start  which produces funny errors such as:

WARN [web-server]: 404: /base/assert.js
PhantomJS 1.9.7 (Linux) ERROR: 'There is no timestamp for /base/assert.js!'

PhantomJS 1.9.7 (Linux) ERROR
  Error: Module name "fs" has not been loaded yet for context: _. Use require([])
  http://requirejs.org/docs/errors.html#notloaded
  at /home/matas/code/tmp/karma-test/node_modules/requirejs/require.js:141

If we uninstall Ace using Bower, the error is gone, so it is clearly connected with it.

Solution

The root of problem is in automatically generated file test-main.js It contains such matching pattern:

var TEST_REGEXP = /(spec|test)\.js$/i;

That test.js is matched in Ace's test folder and included in testing - then the whole hell breaks loose :) Replace this line with something more specific to your project and make sure it does not match files in your libraries:

var TEST_REGEXP = /spec\.js$/i;

Happy coding :)

Read more