Karma with Webpack and Typescript performs no test

Question

I'm trying to figure out how to use the Karma testrunner with Webpack and Typescript source files. Taking this source file as the only test file as an example:

test.spec.ts

var message: string = 'yay';
alert(message);
describe('1st tests', () => {
  it('true is true', () => expect(true).toBe(true));
});

And the following karma config:

karma.config.js

module.exports = function (config) {

  config.set({
    basePath: '',
    frameworks: ['jasmine'],

    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-webpack'),
      require('karma-jasmine-html-reporter')
    ],

    client: {
      builtPaths: ['app/'], // add more spec base paths as needed
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },

    customLaunchers: {
      // From the CLI. Not used here but interesting
      // chrome setup for travis CI using chromium
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },

    files: [
      { pattern: 'app/test.spec.ts', included: true, watched: true },
    ],

    exclude: [],
    preprocessors: {
      // add webpack as preprocessor
      'app/test.spec.ts': ['webpack']
    },

    webpack: {
      // karma watches the test entry points
      // (you don't need to specify the entry option)
      // webpack watches dependencies

      // webpack configuration
      resolve: {
        //root: [ path.join(__dirname, 'app') ],
        extensions: ['', '.ts', '.js']
      },
      module: {
        loaders: [
          // .ts files for TypeScript
          { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'], exclude: '/node_modules/' },
        ]
      }
    },
    reporters: ['progress', 'kjhtml'],

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  })
}

No tests are found when running karma start. The browser will start, but it says it finds 0 tests. When I change the .ts extension to be .js and update the karma config file it does work, so clearly it's the Typescript that messes it up.

However, when running webpack manually with the configuration above, it'll just output a proper javascript file, so the configuration does seem ok...

To be complete, these are the package.json and tsconfig.json files:

package.json

{
  "name": "karma-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "karma": "karma init"
  },
  "author": "",
  "license": "ISC",
  "private": true,
  "devDependencies": {
    "@types/jasmine": "^2.5.41",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "jasmine-core": "^2.5.2",
    "karma": "^1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-webpack": "^2.0.1",
    "typescript": "^2.1.5",
    "webpack": "^1.14.0"
  }
}

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    },
    "awesomeTypescriptLoaderOptions": {
        "useWebpackText": true
    },
    "exclude": [
        "node_modules"
    ]
}

Answer 1

I also encountered this problem. I ended up switching to karma-typescript, which runs the tests flawlessly.

Answer 2

You have to add the mime type for Typescript files. Otherwise, Chrome won't run these files.

mime: {
  'text/x-typescript': ['ts']
}