unit test using typescript and karma

Question

I am using karma, jasmine, typescript to write unit test for the helloworld application from https://angular.io/docs/js/latest/quickstart.html.

Below is the test code:

///<reference path="../typings/jasmine/jasmine.d.ts"/>

import {
    MyAppComponent
} from '../spray1';

describe("name is Alice", () => {
    var comp = new MyAppComponent();

    it("verify name", () => {
        expect(comp.name).toBe("Alice"); 
    });
});

tsc (with "--module commonjs") transpiles this test code into:

///<reference path="../typings/jasmine/jasmine.d.ts"/>
var spray1_1 = require('../spray1');
describe("name is Alice", function () {
    var comp = new myAppComponent_1.MyAppComponent();
    it("verify name", function () {
        expect(comp.name).toBe("Alice");
    });
});

karma fails to run the unit test:

Uncaught Error: Module name "../myAppComponent" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded at /Users/spray1/web2/node_modules/requirejs/require.js:141

Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 0 of 0 SUCCESS (0 secs / 0 secs)

If I use tsc with "--module amd", the transpiled test code is:

define(["require", "exports", '../spray1'], function (require, exports, spray1_1) {
    describe("name is Alice", function () {
        var comp = new spray1_1.MyAppComponent();
        it("verify name", function () {
            expect(comp.name).toBe("Alice");
        });
    });
});

"karma start test/karma.conf.js" threw below error on the transpiled js files:

Uncaught Error: Mismatched anonymous define() module: function (require, exports, spray1_1) { describe("name is Alice", function () { var comp = new spray1_1.MyAppComponent(); it("verify name", function () { expect(comp.name).toBe("Alice"); }); }); } http://requirejs.org/docs/errors.html#mismatch at /Users/spray1/web2/node_modules/requirejs/require.js:141 Chrome 43.0.2357 (Mac OS X 10.10.3): Executed 0 of 0 ERROR (0.04 secs / 0 secs)

As you see, I have trouble to make it work either way (--module commonjs/amd). Which way is the right way to go and how to make it work? Appreciate any help!

Answer 1

So, the link you've provided is to the JavaScript version of the quickstart, but it appears you're using TypeScript.

I would suggest looking at the TypeScript version of the quickstart documentation. It has a tsconfig.json file which provides the appropriate compile target:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}