title: jspm + karma + karma-jspm + plugin-typescript
body: <p>This post is stackoverflow repost from my issues at <a href="https://github.com/frankwallis/plugin-typescript/issues/64" rel="nofollow">https://github.com/frankwallis/plugin-typescript/issues/64</a> and <a href="https://github.com/Workiva/karma-jspm/issues/112" rel="nofollow">https://github.com/Workiva/karma-jspm/issues/112</a></p>
  
  <p>We plan to upgrade our team stack for web ui so we decide:</p>
  
  <p>1) use Karma as test launcher and jasmine as framework ( mocha and custom runners before)</p>
  
  <p>2) use TypeScript for source code with UMD or system module out (pure Javascript before)</p>
  
  <p>3) use SystemJS as module loader to allow use different module's types (CommonJS, AMD, system , ES6) without overheat ( RequireJS before)</p>
  
  <p>And additionally:</p>
  
  <p>1) we want to run tests directly from typescript code without precompilation and storing JS on disk</p>
  
  <p>2) we want to have test environment layout very close to production layout</p>
  
  <p>3) we have setup karma + jasmine + karma-typescript-preprocessor and it works well. BUT we want ot work with JSPM/SystemJS loader while in this case we will be sure that our test environment match production where SystemJS loader is used. Becuase for another hand we will require to write some custom bootstrap things for test-only.</p>
  
  <p>But we have problems with karma + jspm + typescript-plugin (jspm). </p>
  
  <p>In JSPM './config.js'</p>
  
  <pre><code>    System.config({
        baseURL: "/", 
        "transpiler": false,
    "packages": {
      "src": {
          "main": "test.ts",
        "defaultExtension": "ts",
        "meta": {
          "*.ts": {
            "loader": "ts"
          },
          "*.js": {
            "loader": "ts"
          }
        }
      }
    },
    paths: {
      "npm:*": "jspm/npm/*",
      "github:*": "jspm/github/*"
    },
  
    map: {
      "ts": "github:frankwallis/plugin-typescript@2.2.3",
      "typescript": "npm:typescript@1.6.2",
      "github:frankwallis/plugin-typescript@2.2.3": {
        "typescript": "npm:typescript@1.6.2"
      }
    }
  });
  </code></pre>
  
  <p>In Karma config:</p>
  
  <pre><code>// Karma configuration
  // Generated on Mon Nov 30 2015 02:58:44 GMT+0500 (RTZ 4 (зима))
  
  module.exports = function(config) {
    config.set({
      basePath: '',
      frameworks: ['jspm','jasmine'],
      plugins:[
          "karma-jspm",
          'karma-jasmine',
          'karma-chrome-launcher'
          ],
      jspm: {
          loadFiles: ['src/test.ts'], //we just try to check one simple test
          packages: "jspm/"
      }   ,
      proxies : { // avoid Karma's ./base virtual directory
          '/src/': '/base/src/',
          '/jspm/': '/base/jspm/'
      },
      reporters: ['progress'],
      port: 9876,
      browsers: ['Chrome']
    })
  }
  </code></pre>
  
  <p>But something goes wrong:</p>
  
  <pre><code>30 11 2015 14:53:34.564:WARN [web-server]: 404: /jspm/github/frankwallis/pl
  ugin-typescript@2.2.3
  Chrome 46.0.2490 (Windows 10 0.0.0) ERROR: 'Potentially unhandled rejection [6]
  Error: XHR error (404 Not Found) loading http://localhost:9876/jspm/github/frank
  wallis/plugin-typescript@2.2.3
      at error (http://localhost:9876/base/jspm/system.src.js?6536115be64e0ff966e0
  5546f7767676fa7c03d6:1020:16)
      at XMLHttpRequest.xhr.onreadystatechange (http://localhost:9876/base/jspm/sy
  stem.src.js?6536115be64e0ff966e05546f7767676fa7c03d6:1028:13)'
  </code></pre>
  
  <p>And we checked that url is valid: for ex <code>/jspm/github/frankwallis/plugin-typescript@2.2.3\utils.js</code> is served well by Karma.
  I don't understand why it trys to load whole typescript plugin directory.</p>
  
  <p>So we have question:</p>
  
  <p>1) Is it a bug or our fail in understanding/config</p>
  
  <p>2) If it's our fail - how to fix it?</p>
  
  <p>3) May be we choose not correct how to test with Karma + JSPM + Typescript?</p>
  
  <p>Any advice will be helpful.</p>