Error in using Karma with SystemJS, gulp, and TypeScript

Question

I am new to node.js stack like npm, gulp etc. I had wrote some JavaScript unit test cases earlier, and now want to use Karma as test runner. However, after a few attempts I am completely lost now.

To start, I have following project configurations:

• SystemJS as module loader.

• Folder structre (some are omitted for brevity):

  project
  |
  |--build //contains all gulp tasks
  |
  |--dist //contains the output (*.html, *.js etc.)
  |
  |--jspm_packages 
  |
  |--node_modules
  |
  |--src //contains the source .html, and *.ts
  |
  |--tests //contains unit tests in *.ts. I also have a gulp task to build tests/**/*.ts to *.js in the same folder.
  |
  |--typings //contains type definitions
  |
  |--config.js //contains SystemJS configuration
  |
  |--karma.conf.js
  

• karma.conf.js

  // Karma configuration        
  
  module.exports = function (config) {
      config.set({
          basePath: '',
          frameworks: [ 'qunit'],
          files: [
              'jspm_packages/system.js',
              //'config.js',
              'dist/custom/*.js' //,
              //'tests/**/*.js'
          ],
          exclude: [        ],
          preprocessors: {        },
          reporters: ['progress'],
          port: 9876,
          colors: true,
          logLevel: config.LOG_INFO,
          autoWatch: true,
          browsers: ['Chrome'],
          singleRun: false,
          concurrency: Infinity
      });
  }
  

However, whenever I do karma start, I have error Uncaught TypeError: Unexpected anonymous System.register call.. Is there anyway to resolve this?

Other Attempts:

1. Tried to create a gulp task, according to https://github.com/karma-runner/gulp-karma. But have same problem.

2. Tried to use karma-systemjs. And the karma.conf.js was different as follows:

   // Karma configuration        
   
   module.exports = function (config) {
       config.set({
           ...
           frameworks: [ 'systemjs', 'qunit'],
           plugins: ['karma-systemjs', 'karma-chrome-launcher', 'karma-firefox-launcher'],
           systemjs: {
               configFile: 'config.js',
               serveFiles: ['jspm_packages/**/*.js'],
               config: {
                   transpiler: 'babel'
               }
           },
           ...
       });
   }
   

   And in this case I got following error, though I have both SystemJs and Babel installed:

   [WARNING] Looking up paths with require.resolve() is deprecated.
   Please add "systemjs" to your SystemJS config paths.
   Cannot find "systemjs".
     Did you forget to install it ?
     npm install systemjs --save-dev
   [WARNING] Looking up paths with require.resolve() is deprecated.
   Please add "babel" to your SystemJS config paths.
   Cannot find "babel-core".
     Did you forget to install it ?
     npm install babel-core --save-dev
   

Any help in this regard will be great.