Karma - No test runned if I don't use PhantomJS browser

Question

I am trying to write my Karma tests for my jHipster project. I got an TypeError: Attempted to assign to readonly property so I decided to try to debug it through my browser.

Originally, the browser used was PhantomJS, but I changed it to Firefox in order to be able to debug. I also added verbose.

But unfortunately, when I use something different from PhantomJS, no tests are running :

Firefox 53.0.0 (Windows 7 0.0.0): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
Firefox 53.0.0 (Windows 7 0.0.0): Executed 0 of 0 ERROR (0.004 secs / 0 secs)
15 06 2017 11:08:20.352:DEBUG [reporter.remap-istanbul]: Writing coverage to target/test-results/coverage
15 06 2017 11:08:20.422:DEBUG [reporter.remap-istanbul]: Writing coverage to null

=============================== Coverage summary ===============================
Statements   : 100% ( 0/0 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 0/0 )

Here is my karma.conf.js :

'use strict';

const path = require('path');
const webpack = require('webpack');
const WATCH = process.argv.indexOf('--watch') > -1;
const LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin");

module.exports = function (config) {
    config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: './',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine', 'intl-shim'],

    // list of files / patterns to load in the browser
    files: [
        'spec/entry.ts'
    ],


    // list of files to exclude
    exclude: ['e2e/**'],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'spec/entry.ts': ['webpack', 'sourcemap']
    },

    webpack: {
        resolve: {
            extensions: ['.ts', '.js']
        },
        module: {
            rules: [
                {
                    test: /\.ts$/, enforce: 'pre', loader: 'tslint-loader', exclude: /(test|node_modules)/
                },
                {
                    test: /\.ts$/,
                    loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true'],
                    exclude: /node_modules/
                },
                {
                    test: /\.(html|css)$/,
                    loader: 'raw-loader',
                    exclude: /\.async\.(html|css)$/
                },
                {
                    test: /\.async\.(html|css)$/,
                    loaders: ['file?name=[name].[hash].[ext]', 'extract']
                },
                {
                    test: /\.scss$/,
                    loaders: ['to-string-loader', 'css-loader', 'sass-loader']
                },
                {
                    test: /src[\/|\\]main[\/|\\]webapp[\/|\\].+\.ts$/,
                    enforce: 'post',
                    exclude: /(test|node_modules)/,
                    loader: 'sourcemap-istanbul-instrumenter-loader?force-sourcemap=true'
                },
                {
                    test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i,
                    loaders: [
                        'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', {
                            loader: 'image-webpack-loader',
                            query: {
                                gifsicle: {
                                    interlaced: false
                                },
                                optipng: {
                                    optimizationLevel: 7
                                }
                            }
                        }
                    ]
                }
                ]
        },
        devtool: 'inline-source-map',
        plugins: [
            new webpack.ContextReplacementPlugin(
                // The (\\|\/) piece accounts for path separators in *nix and Windows
                /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
                root('./src') // location of your src
            ),
            new LoaderOptionsPlugin({
                options: {
                    tslint: {
                        emitErrors: !WATCH,
                        failOnHint: false
                    }
                }
            })
        ]
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['dots', 'junit', 'progress', 'karma-remap-istanbul'],

    junitReporter: {
        outputFile: '../../../../target/test-results/karma/TESTS-results.xml'
    },

    remapIstanbulReporter: {
        reports: { // eslint-disable-line
            'html': 'target/test-results/coverage',
            'text-summary': null
        }
    },

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_DEBUG,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: WATCH,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Firefox'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: !WATCH
    });
};

function root(__path) {
    return path.join(__dirname, __path);
}

Answer 1

Fixed by adding :

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

in karma.conf.js.