Karma-webpack takes ~5 minutes to load

Hello everyone! Please, help me. When I start unit tests I get an the following logs with loglevel: config.LOG_DEBUG

npm run test

> esanum-frontend@0.6.1 test:backend /home/msavin/Projects/frontend
> npm run rimraf -- spec-results && karma start --backend


> esanum-frontend@0.6.1 rimraf /home/msavin/Projects/frontend
> rimraf "spec-results"

13 12 2017 14:12:51.238:DEBUG [plugin]: Loading karma-* from /home/msavin/Projects/frontend/node_modules
13 12 2017 14:12:51.243:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-chrome-launcher.
13 12 2017 14:12:51.253:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-coverage.
13 12 2017 14:12:51.421:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-fixture.
13 12 2017 14:12:51.422:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-html-detailed-reporter.
13 12 2017 14:12:51.479:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-jasmine.
13 12 2017 14:12:51.480:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-jasmine-diff-reporter.
13 12 2017 14:12:51.496:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-jasmine-html-reporter.
13 12 2017 14:12:51.497:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-jasmine-jquery.
13 12 2017 14:12:51.498:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-json-fixtures-preprocessor.
13 12 2017 14:12:51.499:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-mocha-reporter.
13 12 2017 14:12:51.514:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-remap-coverage.
13 12 2017 14:12:51.529:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-sourcemap-loader.
13 12 2017 14:12:51.529:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-spec-reporter.
13 12 2017 14:12:51.535:DEBUG [plugin]: Loading plugin /home/msavin/Projects/frontend/node_modules/karma-webpack.
13 12 2017 14:12:51.771:DEBUG [plugin]: Loading inlined plugin (defining launcher:ChromeTravisCi).
13 12 2017 14:12:51.901:DEBUG [web-server]: Instantiating middleware
13 12 2017 14:12:51.902:DEBUG [reporter]: Trying to load reporter: jasmine-diff
13 12 2017 14:12:51.903:DEBUG [reporter]: Trying to load color-version of reporter: jasmine-diff (jasmine-diff_color)
13 12 2017 14:12:51.904:DEBUG [reporter]: Couldn't load color-version.
13 12 2017 14:12:51.904:DEBUG [reporter]: Trying to load reporter: mocha
13 12 2017 14:12:51.906:DEBUG [reporter]: Trying to load color-version of reporter: mocha (mocha_color)
13 12 2017 14:12:51.906:DEBUG [reporter]: Couldn't load color-version.
13 12 2017 14:12:51.906:DEBUG [reporter]: Trying to load reporter: coverage
13 12 2017 14:12:51.907:DEBUG [reporter]: Trying to load color-version of reporter: coverage (coverage_color)
13 12 2017 14:12:51.908:DEBUG [reporter]: Couldn't load color-version.
13 12 2017 14:12:51.908:DEBUG [reporter]: Trying to load reporter: remap-coverage
13 12 2017 14:12:51.908:DEBUG [reporter]: Trying to load color-version of reporter: remap-coverage (remap-coverage_color)
13 12 2017 14:12:51.909:DEBUG [reporter]: Couldn't load color-version.
13 12 2017 14:12:52.135:DEBUG [preprocessor.coverage]: Processing "/home/msavin/Projects/frontend/config/spec-bundle.js".
13 12 2017 14:12:52.285:DEBUG [preprocessor.coverage]: Processing "/home/msavin/Projects/frontend/config/spec-bundle.js".

[at-loader] Using typescript@2.2.1 from typescript and "tsconfig.json" from /home/msavin/Projects/frontend/tsconfig.json.


[at-loader] Checking started in a separate process...


[at-loader] Ok, 12.152 sec.
13 12 2017 14:17:49.938:DEBUG [preprocessor.sourcemap]: base64-encoded source map for /home/msavin/Projects/frontend/config/spec-bundle.js
13 12 2017 14:17:50.946:DEBUG [preprocessor.sourcemap]: base64-encoded source map for /home/msavin/Projects/frontend/config/spec-bundle.js
13 12 2017 14:17:51.923:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
13 12 2017 14:17:51.924:INFO [launcher]: Launching browser Chrome with unlimited concurrency
13 12 2017 14:17:53.050:INFO [launcher]: Starting browser Chrome
13 12 2017 14:17:53.051:DEBUG [temp-dir]: Creating temp dir at /tmp/karma-11198497
13 12 2017 14:17:53.051:DEBUG [launcher]: google-chrome --user-data-dir=/tmp/karma-11198497 --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-background-timer-throttling --disable-renderer-backgrounding --disable-device-discovery-notifications http://localhost:9876/?id=11198497
13 12 2017 14:17:55.386:DEBUG [web-server]: serving: /home/msavin/Projects/frontend/node_modules/karma/static/client.html
13 12 2017 14:17:55.401:DEBUG [web-server]: serving: /home/msavin/Projects/frontend/node_modules/karma/static/karma.js
13 12 2017 14:17:55.510:DEBUG [karma]: A browser has connected on socket LoBMgCG4dZc9AJbFAAAA
13 12 2017 14:17:55.511:DEBUG [web-server]: serving: /home/msavin/Projects/frontend/node_modules/karma/static/favicon.ico
13 12 2017 14:17:55.517:DEBUG [web-server]: upgrade /socket.io/?EIO=3&transport=websocket&sid=LoBMgCG4dZc9AJbFAAAA
13 12 2017 14:17:55.517:DEBUG [proxy]: NOT upgrading proxyWebSocketRequest /socket.io/?EIO=3&transport=websocket&sid=LoBMgCG4dZc9AJbFAAAA
13 12 2017 14:17:55.555:INFO [Chrome 63.0.3239 (Linux 0.0.0)]: Connected on socket LoBMgCG4dZc9AJbFAAAA with id 11198497
13 12 2017 14:17:55.555:DEBUG [launcher]: Chrome (id 11198497) captured in 3.631 secs

This task takes 5 minutes(( Why is it so long? I’ve 60 unit test, I think this problem into karma-webpack. Hangs starts with: [at-loader] Using typescript@2.2.1 from typescript and "tsconfig.json" from /home/msavin/Projects/frontend/tsconfig.json.

Attach my karma.config:

module.exports = function (config) {
    var testWebpackConfig = require('./webpack.test.js')({env: 'test'});

    var configuration = {

        jsonFixturesPreprocessor: {
            variableName: '__json__'
        },

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

        /*
         * Frameworks to use
         *
         * available frameworks: https://npmjs.org/browse/keyword/karma-adapter
         */
        frameworks: ['jasmine-jquery', 'jasmine', 'fixture'],

        // list of files to exclude
        exclude: [],

        client: {
            args: config.backend ? ['--backend'] : [],
            captureConsole: true
        },

        /*
         * list of files / patterns to load in the browser
         *
         * we are building the test environment in ./spec-bundle.js
         */
        files: [
            {pattern: './config/spec-bundle.js', watched: false},
            {pattern: './src/assets/mock/**/*.json'}
        ],

        /*
         * By default all assets are served at http://localhost:[PORT]/base/
         */
        proxies: {
            "/assets/": "/base/src/assets/"
        },

        /*
         * preprocess matching files before serving them to the browser
         * available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
         */
        preprocessors: {
            './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'],
            './src/assets/mock/**/*.json': ['json_fixtures']
        },

        // Webpack Config at ./webpack.test.js
        webpack: testWebpackConfig,

        coverageReporter: {
            type: 'in-memory'
        },

        remapCoverageReporter: {
            'text-summary': null,
            json: './spec-results/coverage.json',
            html: './spec-results/html'
        },

        mochaReporter: {
            output: 'noFailures'
        },

        jasmineDiffReporter: {
            color: {
                expectedBg: 'bgRed',
                expectedWhitespaceBg: 'bgRed',
                expectedFg: 'black',

                actualBg: 'bgGreen',
                actualWhitespaceBg: 'bgGreen',
                actualFg: 'black',

                warningBg: 'bgGreen',
                warningWhitespaceBg: 'bgGreen',
                warningFg: 'bold',

                defaultBg: '',
                defaultFg: ''
            },
            pretty: false,
            multiline: false,
            verbose: true,
            matchers: {}
        },

        // Webpack please don't spam the console when running in karma!
        webpackMiddleware: {
            // webpack-dev-middleware configuration
            // i.e.
            noInfo: true,
            // and use stats to turn off verbose output
            stats: {
                // options i.e.
                chunks: false
            }
        },

        htmlDetailed: {
            dir: './spec-results/'
        },

        /*
         * test results reporter to use
         *
         * possible values: 'dots', 'progress'
         * available reporters: https://npmjs.org/browse/keyword/karma-reporter
         */
        reporters: ['jasmine-diff', 'mocha', 'coverage', 'remap-coverage'],

        // 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: false,

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

        customLaunchers: {
            ChromeTravisCi: {
                base: 'Chrome',
                flags: ['--no-sandbox']
            }
        },

        /*
         * Continuous Integration mode
         * if true, Karma captures browsers, runs the tests and exits
         */
        singleRun: false
    };

    if (process.env.TRAVIS) {
        configuration.browsers = [
            'ChromeTravisCi'
        ];
    }
    config.set(configuration);
};

[jhowmerisse]

The solution here was change the mode. Webpack 4 has defaults mode in production. Add mode: ‘development’.

[DortmunderJunge]

We ran into the same Problem when upgrading our Typescript-Project to webpack@4. We fixed the slow build by configuring ts-loader to transplie-only and adding fork-ts-checker-webpack-plugin for type-checking as described here: https://github.com/TypeStrong/ts-loader#faster-builds Though this does not address the rootcause of slow karma-builds, we still got back our spec-builds within serveral seconds