Jasmine tests case not launching within define in compiled Typescript

Question

I am working with a testing project, where I am writing a pure Javascript Jasmine Karma setup to test a pre-compiled Typescript setup. However, I can not get the test cases to start.

I can see the console messages that come from compiled typescript within the console fire alright, but it simply will not start the test scripts.

Note this came from an AngularApp, but this entire part comes from a section was made and compiled without Angular2.

There is no error message, outside of it showing that 0/0 tests were run, and there was no timestamp for "component/to/test".

In the test.spec.js file, I have

define("testName", ["component/to/test"], function(component){
    describe("testing module", function(){
         it("should work", function(){expect(true).toEqual(true)});
    })
}

In the compiled typescript file, myTs.js

var requirejs, require, define;
(function (global) {

    define("component/to/test" ["depend", "ences"]), function(depend,ences)
    { more code here }) 

     some compiled typescript here
});
require.config({
     path: {path to javascript libs},
     shim: { ... }
})

In my karma file

basePath: '',
frameworks: ['jasmine', 'requirejs'],
files: [
     'lib1',
     'lib2',
     'spec/test-main.js',
     {pattern: 'js/*.js', included: true, served: true},
     {pattern: 'spec/*.spec.js', included: false, served: true}
],
exclude: [],
reporters: ['progress'],
autoWatch: true,
browsers: ['Chrome']

In my test-main.js, which I got from karma init after it asked if I wanted to use requirejs.

var allTestFiles = []
var TEST_REGEXP = /(spec|test)\.js$/i

Object.keys(window.__karma__.files).forEach(function (file) {
if (TEST_REGEXP.test(file)) {

    var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '')
    allTestFiles.push(normalizedTestModule)
 }

})

require.config({
   baseUrl: 'base',
  deps: allTestFiles,
  callback: window.__karma__.start
})

comments and some not related code was removed for space.

Answer 1

What you are trying to do can be done. I've done it many many times, without any trouble.

You should always run RequireJS with the configuration option enforceDefine turned on:

require.config({
  enforceDefine: true,
  // Anything else you need.
});

because it reveals problems that may go unnoticed. The only time you don't want this turned on is if you can name a substantial reason why enforceDefine is bad for your specific case.

One major problem in the code you show is that you are hardcoding module names in the define calls. Like define("testName", ... You should not do this. Remove the module names from your define calls. Hardcoded module names are added by the optimizer when you ask it to create bundles of modules. There are a few cases where you may want to hardcode a name but these cases are rare and unless you can name a substantial and good reason you need a hardcoded name, don't do it.

In the case of your test file, the hardcoded name is especially problematic. test-main.js directs RequireJS to load your test files. It is effectively requiring a module named something like spec/test.spec. When RequireJS actually loads your JavaScript file corresponding to this module, what it finds is a definition for a module named testName. So it does not find the module spec/test.spec and it fails silently because enforceDefine is false.

The hardcoded component/to/test name you give to define in myTs.js probably works alright given the configuration you show. I still don't recommend using a hardcoded name there. You say:

there was no timestamp for "component/to/test"

If you mean a Karma timestamp, then there cannot be any because you do not have a file with that name.

Answer 2

You should not compile spec files with tsc, and then run karma over js files.

You should setup karma with typescript loaders, this is a package you should try with configuration sample:

https://www.npmjs.com/package/karma-typescript#configuration

If this is angular v2+ project, you are definitely should use @angular/cli

https://github.com/angular/angular-cli

It is supported by angular team, and gives you a lot of fancy things, like:

• prod build
• aot build
• easy universal setup
• karma and protractor configs, etc.