title: Karma testing with typescript and angular 2 is throwing Typeerror for "System.config"
body: <p>I'm super new to testing, I'm using angular 2 as a new beginning to learning.</p>
  
  <p><strong>ERRROR:</strong></p>
  
  <pre><code>INFO [Chrome 42.0.2311 (Mac OS X 10.9.3)]: Connected on socket xo5ufjmFKLGc5QSuAAAB with id 34336816
  WARN [web-server]: 404: /base/jspm_packages/es6-module-loader.js
  ERROR [karma]: Uncaught TypeError: System.config is not a function
  at http://localhost:9876/base/js/angular.js?4c894ae47e8d04bb01965dbf22fa08aed20f0eb2:25575
  
  ERROR [karma]: Uncaught ReferenceError: require is not defined
  at http://localhost:9876/base/app/app.js?8a00e7f6717b2dd7118e800d05625a443a4b2065:13
  </code></pre>
  
  <h2><strong>QUESTION:</strong></h2>
  
  <p>How can I get remedy the TypeError and uncaught Reference Error, so my main.spec.js can pass?</p>
  
  <hr>
  
  <p><strong>Karma.conf</strong></p>
  
  <pre><code>// Karma configuration
  // Generated on Mon May 18 2015 18:17:07 GMT-0700 (PDT)
  
  module.exports = function(config) {
    config.set({
  
      // base path that will be used to resolve all patterns (eg. files, exclude)
      basePath: '',
  
  
      // frameworks to use
      // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
      frameworks: ['jasmine'],
  
  
      // list of files / patterns to load in the browser
      files: [
       'app/app.js',
       'tests/*.js'
      ],
  
      // list of files to exclude
      exclude: [
      ],
  
  
      // preprocess matching files before serving them to the browser
      // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
      preprocessors: {
      },
  
  
      // test results reporter to use
      // possible values: 'dots', 'progress'
      // available reporters: https://npmjs.org/browse/keyword/karma-reporter
      reporters: ['progress'],
  
  
      // web server port
      port: 9876,
  
  
      // enable / disable colors in the output (reporters and logs)
      colors: true,
  
  
      // level of logging
      // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
      logLevel: config.LOG_INFO,
  
  
      // enable / disable watching file and executing tests whenever any file changes
      autoWatch: true,
  
  
      // start these browsers
      // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
      browsers: ['Chrome'],
  
  
      // Continuous Integration mode
      // if true, Karma captures browsers, runs the tests and exits
      singleRun: false
    });
  };
  </code></pre>
  
  <p><strong>tests/main.spec.js:</strong></p>
  
  <pre><code>import Foo from '../app/app.js';
  
  describe('ES6 Foo', function () {
  
    let foo;
  
    beforeEach(()=&gt;{
        foo = new Foo();
    });
  
      it('should call foo.thing and test default value', function(){
          expect(foo.thing).toEqual(0);
      });
  });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="./js/traceur.js"&gt;&lt;/script&gt;
          &lt;script src="./jspm_packages/system.js"&gt;&lt;/script&gt;
          &lt;script src="./js/angular2.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;main-app&gt;&lt;/main-app&gt;
          &lt;script&gt;
              System.import('app/app');
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.ts</strong></p>
  
  <pre><code>/// &lt;reference path="../typings/angular2/angular2"/&gt;
  import {bootstrap, Component, View} from 'angular2/angular2'
  
  @Component({
      selector:'main-app',
      injectables: [
  
      ]
  })
  
  @View({
    templateUrl: 'app/main.html',
  })
  
  class MainApp {
      thing;
      constructor(){
          this.thing = 0
      }
  
      add(){
          this.thing++;
      }
      subtract(){
          this.thing--;
      }
  }
  
  bootstrap(MainApp);
  </code></pre>