Karma gives 404 on a file i try to System.import

[kemalcany]

Hello guys..

This is going to be a total noob problem but I've spent a lot of time on configuring Karma to work with System.js and so far no luck. Wanted to ask for help before I switch to a different module plugin...

All I am trying to achieve now is to load (via System.import) an external .js file to my Karma run and use a function there. The test and .js is trivial:

src/js/addition.js

console.log("Hello");
function add(a,b){
    return a + b;
} 

src/test/test.js

System.import('addition');

describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(add(3,4)).toBe(7);
    });
});

When Karma runs the test it cannot find the add function defined under addition.js. It also gives a 404 warning as follows:

... 19 11 2015 09:27:48.999:WARN [web-server]: 404: /base/addition

Clearly, I can't load addition.js inside the test.js

My karma.conf.js file is as follows:

module.exports = function(config) {
  config.set({
    basePath: './',
    frameworks: ['systemjs','jasmine'],
    plugins:['karma-systemjs','karma-jasmine'],
    systemjs: {
      serveFiles: [
        'src/js/*.js'
      ],
      config: {
        paths: {
          'traceur': 'node_modules/traceur/bin/traceur.js',
          'systemjs': 'node_modules/systemjs/dist/system.js',
          'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.js',
          'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js'
        }
      }
    },
    files: [
      {pattern: 'src/js/*.js', included: false},
      'src/test/test.js'
    ],
    exclude: [
    ],
    preprocessors: {},
    reporters: ['dots'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: [],
    singleRun: false
  });
};

Notice that I am not using a config file for system.js and instead loading paths under systemjs in karma.conf.js

Can anyone tell me what I am doing wrong please? Hope this will be a good place for other starters to take advantage too..

Cheers!

[rolaveric]

Hi @kemalcany

Two things I've noticed:

1. The 404 mentions '/base/addition' - no '.js' at the end. So it may be as simple as changing your System.import('addition') to System.import('addition.js'). You could also use System.defaultJSExtensions = true;, but I wouldn't recommend it because it's only there for backwards compatibility.
2. You're calling System.import(), which returns promise for when the import has completed. However your test assumes that add() is available straight away. You can either wrap your test code in .then(), or change to a synchronous method like require() or ES6 import notation.

Hope that helps.

[kemalcany]

Hi @rolaveric thanks so much for your help!

1. I've tried adding the extensions earlier but I had no luck with it.
2. .then() didn't work neither because i think when import() cannot find the module it doesn't continue with then()..

But require() worked! :) I guess it was an issue of synchronizing as you've suggested. Thanks a lot for that!!!

I am copy/pasting the working code below for future reference.

src/js/addition.js

function add(a,b){
    return a + b;
}
module.exports.add = add;

src/test/test.js

var addition = require("src/js/addition.js");

describe("Addition", function() {
    it("gets loaded and adds two numbers", function() {
        expect(addition.add(3,4)).toBe(7);
    });
});

No changes in karma.conf.js

Cheers!