Karma with Webpack and Typescript doesn't run any tests

Question

I am trying to figure out how to use the Karma test resource with the Webpack and Typescript source files. As an example, you can use this source file as the only test file:

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
  })
}

When starting the karma starttests were not found. The browser will start, but it says it finds 0 tests. When I change the extension .tsas I .jsupdate the karma configuration file, it really works, so it Typescript will ruin it.

However, when you start webpack manually with the above configuration, it simply displays the correct javascript file, so the configuration looks fine ...

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

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

mime Typescript. Chrome .

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

Answer 2

. karma-typescript, .