karma-jasmine-webpack-typescript.md

create package.js

npm init -y

create tsconfig.json

tsc --init

edit: "sourceMap": true

install deps

npm i karma jasmine karma-webpack ts-loader typescript webpack karma-chrome-launcher karma-jasmine karma-sourcemap-loader @types/jasmine --save-dev

typings

typings install dt~jasmine --global --save

karma.conf.js

const webpack = require("webpack");

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: ['test/*.test.ts'],
        mime: { 'text/x-typescript': ['ts','tsx'] },
        preprocessors: {
            'test/*.test.ts': ['webpack', 'sourcemap'],
        },
        webpack: {
            resolve: {
                extensions: ['.js', '.ts', '.tsx']
            },
            module: {
                rules: [
                    {test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/}
                ]
            },
            stats: {
                colors: true,
                modules: true,
                reasons: true,
                errorDetails: true
            },
            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/ ]
                })
            ]
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false,
        concurrency: Infinity
    })
}

test/main.test.ts

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

run karma

karma start karma.conf.js

Nice job with the changes from https://gist.github.com/cevek/d64f864ad6677a7f7e46915670a14664.js from @cevek

I would just add npm install -g karma-cli to the mix somewhere.

and possibly a cosmetic keystroke saver to package.json edit
"scripts": { "karma": "karma start karma.conf.js" },
or something.

Thank you both!