RequireJS not loading modules properly using karma and typescript

Question

I am trying to set up unit testing for a SPA using karma/jasmine

First of all, the following test runs just fine in karma:

/// <reference path="../../definitions/jasmine/jasmine.d.ts" />
/// <reference path="../../src/app/domain/core/Collections.ts"/>

define(["app/domain/core/Collections"], (collections) => {

    describe('LinkedList', () => {

        it('should be able to store strings for lookup', () => {
            var list = new collections.Collections.LinkedList<string>();

            list.add("item1");
            expect(list.first()).toBe("item1");
        });
    });
}); 

However, collections is of type anyso that I can not use it for type declarations, thus I'm missing intellisense and whatnot when I am writing my tests. No good!

The problem arises when I try to re-write the test to a more TypeScript friendly format:

/// <reference path="../../definitions/jasmine/jasmine.d.ts" />
/// <reference path="../../src/app/domain/core/Collections.ts"/>
import c = require("./../../src/app/domain/core/Collections");

describe('LinkedList', () => {

    it('should be able to store strings for lookup', () => {
        var list: c.Collections.LinkedList<string> = new c.Collections.LinkedList<string>();

        list.add("item1");
        expect(list.first()).toBe("item1");
    });
});

This compiles just fine, I get my type information for handy intellisense etc, but now karma throws an error.

It turns out it is trying to load the module without the .js postfix, indicated by the following error messages:

There is no timestamp for /base/src/app/domain/core/Collections! 
Failed to load resource: the server responded with a status of 404 (Not Found)
 (http://localhost:9876/base/src/app/domain/core/Collections)
Uncaught Error: Script error for: /base/src/app/domain/core/Collections

I'm gonna stop here for now, but if it will help I am glad to supply my karma config file, test-main and so on. But my hope is that someone has encountered this exact problem before and might be able to point me in the right direction.

My typescript is compiled with the AMD flag.

Answer 1

It is not a TypeScript problem. We encountered the same problem. Turns out that karma "window.__karma__.files" array includes all files included in the test, including the .js extenstion.

Now requireJS does not work when supplying the .js extension. To fix it, in our main-test.js file, we created a variable "tests" by filtering all the *Spec.js files and then we removed the .js from the file name as requireJS needs it to be. More information here: http://karma-runner.github.io/0.8/plus/RequireJS.html

Below is how we did it (based on the info supplied in the link above):

main-test.js

console.log('===========================================')
console.log('=================TEST FILES================')


var tests = Object.keys(window.__karma__.files).filter(function (file) {
    return /\Spec\.js$/.test(file);
}).map(function (file) {
    console.log(file);
    return file.replace(/^\/base\/|\.js$/g, '');
});

console.log('===========================================')
console.log('===========================================')


require.config({
    baseUrl:'/base',
    paths: {
        jquery      :["http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min", "lib/jquery"],
        angular     : ["https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min", "lib/angular"],
        angularMocks: 'app/vendors/bower_components/angular-mocks/angular-mocks',
    },
    shim: {
        'angularMocks': {
            deps: ['angular'],
            exports: 'angular.mock'
        }
    },
    deps: tests,
    callback: window.__karma__.start
});

Also make sure you have supplied the files to be tested in your karma.config.js file, more details here: http://karma-runner.github.io/0.8/plus/RequireJS.html same as the link above.

Hope it helps

Answer 2

It turns out it is trying to load the module without the .js postfix,

That is the perhaps not the actual source of the error. Actually it is looking at /base/src/app/domain/core/Collections and not app/domain/core/Collections (as in your manual type unsafe way). Notice base/src/ that shouldn't be there.