karma-jasmine-webpack-typescript.md

create package.js

npm init -y

create tsconfig.json

tsc --init

install deps

npm i karma jasmine karma-webpack ts-loader typescript webpack karma-chrome-launcher karma-jasmine karma-sourcemap-loader

typings

typings install dt~jasmine --global --save

my.conf.js

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: ['spec/main.spec.ts'],
        preprocessors: {
            'spec/main.spec.ts': ['webpack', 'sourcemap'],
        },
        webpack: {
            resolve: {
                extensions: ['', '.js', '.ts', '.tsx']
            },
            module: {
                loaders: [
                    {test: /\.tsx?$/, loader: 'ts-loader'}
                ]
            },
            stats: {
                colors: true,
                modules: true,
                reasons: true,
                errorDetails: true
            },
            devtool: 'inline-source-map',
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false,
        concurrency: Infinity
    })
}

spec/main.spec.ts

describe('testgroup', ()=> {
    it('case1', ()=> {
        expect(true).toBe(true);
    })
})

run karma

karma start my.conf.js

to work source maps correctly you need patch node_modules/karma-webpack/index.js

// replace this
webpackOptions.output.filename = "[name]";
// by that
webpackOptions.output.filename = "[name].js";

// find this line
Plugin.prototype.readFile = function(file, callback) {
    // insert this lines
	var origFile = file;
	file += '.js';
	
// Replace 
this.waiting.push(process.nextTick.bind(process, this.readFile.bind(this, file, callback)));
// to that
this.waiting.push(process.nextTick.bind(process, this.readFile.bind(this, origFile, callback)));

This no longer seems to work. Output is

Executed 0 of 0 ERROR

This seemed to help: angular/angular-cli#2838 (comment)

@adam-beck you might need to add the mime info to the karma config as mentioned in angular/angular-cli#2838 (comment).

see @jtsom 's answer:
In the karma.conf.js file, add:
mime: { 'text/x-typescript': ['ts','tsx'] },
works for me.

This worked for me with the following updates:

• Used npm install @types/jasmine --save-dev instead of typings install dt~jasmine --global --save
• added the mime: { 'text/x-typescript': ['ts','tsx'] }, to the karma.conf.js file as mentioned above
• Made sure to add "sourceMap": true, inside the compilerOptions in the tsconfig.json file

Also, you don't need to patch the karma-webpack package if you replace devtool: 'inline-source-map', with

plugins: [
new webpack.SourceMapDevToolPlugin({
filename: null, // if no value is provided the sourcemap is inlined
test: /\.(ts|js)($|\?)/i, // process .js and .ts files only
exclude: [ /node_modules/ ]
})
]

in the karma.conf.js file along with requiring webpack (var webpack = require("webpack");)

https://github.com/arekgotfryd/jasmine-webpack-karma-typescript