CODEWITHSUNDEEP
javascriptangularjswebpackkarma-jasmine
riegersn
riegersn

Reputation: 2849

Karma + Webpack + Angularjs - All tests pass but karma errors w/exit code 1

karma 4.0.1, webpack 4.31.0, angular 1.6.8, karma-jasmine 2.0.1, jasmine-core 3.4.0

At work, I've just converted our angularjs app from an old school gulp build process to webpack + es6. Barring a few headaches and hiccups along the way the process has gone well. That is until now.

Karma is running all my tests successfully, all tests pass however Karma exits with code 1 and throws an error with no filename or line number to investigate.

I've been googling for 2 days now, trying a bunch of different things with no success so far. Any help is appreciated.

14 05 2019 13:27:49.456:INFO [karma-server]: Karma v4.0.1 server started at http://0.0.0.0:10002/
14 05 2019 13:27:49.457:INFO [launcher]: Launching browsers ChromeHeadless-C with concurrency unlimited
14 05 2019 13:27:49.528:INFO [launcher]: Starting browser ChromeHeadless
14 05 2019 13:27:50.081:INFO [HeadlessChrome 74.0.3729 (Mac OS X 10.14.4)]: Connected on socket U30VLDHr805gOx4vAAAA with id 50392440
HeadlessChrome 74.0.3729 (Mac OS X 10.14.4) ERROR
  {
    "message": "An error was thrown in afterAll\nSyntaxError: Unexpected string",
    "str": "An error was thrown in afterAll\nSyntaxError: Unexpected string"
  }
HeadlessChrome 74.0.3729 (Mac OS X 10.14.4): Executed 1964 of 1964 ERROR (11.787 secs / 0 secs)

npm debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/Users/riegersn/.nvm/versions/node/v8.9.4/bin/node',
1 verbose cli   '/Users/riegersn/.nvm/versions/node/v8.9.4/bin/npm',
1 verbose cli   'run',
1 verbose cli   'test' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'pretest', 'test', 'posttest' ]
5 info lifecycle [email protected]~pretest: [email protected]
6 info lifecycle [email protected]~test: [email protected]
7 verbose lifecycle [email protected]~test: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~test: PATH: /Users/riegersn/.nvm/versions/node/v8.9.4/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/riegersn/vesi/vpower-ui/node_modules/.bin:/Users/riegersn/.nvm/versions/node/v8.9.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle [email protected]~test: CWD: /Users/riegersn/vesi/vpower-ui
10 silly lifecycle [email protected]~test: Args: [ '-c', 'karma start' ]
11 silly lifecycle [email protected]~test: Returned: code: 1  signal: null
12 info lifecycle [email protected]~test: Failed to exec test script
13 verbose stack Error: [email protected] test: `karma start`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/riegersn/.nvm/versions/node/v8.9.4/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/Users/riegersn/.nvm/versions/node/v8.9.4/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/riegersn/vesi/vpower-ui
16 verbose Darwin 18.5.0
17 verbose argv "/Users/riegersn/.nvm/versions/node/v8.9.4/bin/node" "/Users/riegersn/.nvm/versions/node/v8.9.4/bin/npm" "run" "test"
18 verbose node v8.9.4
19 verbose npm  v6.5.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] test: `karma start`
22 error Exit status 1
23 error Failed at the [email protected] test script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

karma.conf.js

var webpackConfig = require('./webpack.config.js')({ development: true });

module.exports = function (config) {
    config.set({
        basePath: './',

        frameworks: ['jasmine'],

        files: [
            './app/init.js',
            './node_modules/angular-mocks/angular-mocks.js',
            './test/lib/**/*.js',
            './test/mock/**/*.js',
            './app/**/*.mock.js',
            './app/**/*.spec.js'
        ],

        webpack: webpackConfig,

        reporters: ['progress'],

        preprocessors: {
            './app/init.js': 'webpack'
        },

        port: 9999,

        browserNoActivityTimeout: 60000,

        logLevel: config.LOG_INFO,

        autoWatch: false,

        singleRun: true,

        browsers: ['ChromeHeadless-C'],

        customLaunchers: {
            'ChromeHeadless-C': {
                base: 'ChromeHeadless',
                flags: ['--disable-web-security']
            },
            'Chrome-C': {
                base: 'Chrome',
                flags: ['--disable-translate', '--disable-extensions', '--disable-web-security']
            }
        },

        plugins: [
            'karma-jasmine',
            'karma-webpack',
            'karma-chrome-launcher',
            // 'karma-sourcemap-loader'
        ],
        client: {
            jasmine: {
                random: false
            }
        }
    });
};

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const vpowerHost = require('./tools/vpowerHost');
const CopyPlugin = require('copy-webpack-plugin');
const Autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const log = function() {
    console.log('webpack-config ::', ...arguments);
};

module.exports = env => {
    const HOST = vpowerHost(process.env.NODE_ENV);
    log('host ->', HOST);
    log('build mode ->', env.production ? 'production' : 'development');

    let config = {
        context: path.resolve(__dirname, 'app'),
        entry: './init.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js'
        },
        resolve: {
            alias: {
                '@Products': path.resolve(__dirname, 'app/products/'),
                '@Components': path.resolve(__dirname, 'app/shared/components/'),
                '@Controllers': path.resolve(__dirname, 'app/shared/controllers/'),
                '@Direcctives': path.resolve(__dirname, 'app/shared/directives/'),
                '@Filters': path.resolve(__dirname, 'app/shared/filters/'),
                '@Modals': path.resolve(__dirname, 'app/shared/modals/'),
                '@Models': path.resolve(__dirname, 'app/shared/models/'),
                '@Services': path.resolve(__dirname, 'app/shared/services/'),
                '@Views': path.resolve(__dirname, 'app/shared/views/')
            }
        },
        module: {
            rules: [
                {
                    test: require.resolve('jquery'),
                    loader: 'expose-loader?jQuery!expose-loader?$'
                },
                {
                    test: require.resolve('moment'),
                    loader: 'expose-loader?moment'
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    include: path.resolve(__dirname, 'app'),
                    exclude: /node_modules/,
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                {
                    test: /\.html$/,
                    loader: 'html-loader',
                    include: path.resolve(__dirname, 'app'),
                    options: {
                        root: path.resolve(__dirname, 'assets'),
                        attrs: ['img:src'],
                        minimize: env.production,
                        removeComments: env.production,
                        collapseWhitespace: env.production
                    }
                },
                {
                    test: /\.css$/,
                    use: [env.production ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']
                },
                {
                    test: /\.scss$/,
                    use: [
                        env.production ? MiniCssExtractPlugin.loader : 'style-loader',
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: () => [Autoprefixer()]
                            }
                        },
                        'sass-loader'
                    ]
                },
                {
                    test: /\.(png|jpe?g|svg)$/,
                    loader: 'file-loader',
                    options: {
                        limit: 8000,
                        name: 'images/[name].[ext]'
                    }
                },
                {
                    test: /\.(jpg|png|gif|svg)$/,
                    loader: 'image-webpack-loader',
                    enforce: 'pre'
                },
                {
                    test: /\.(woff|woff2|eot|ttf)$/,
                    loader: 'file-loader?limit=100000',
                    options: {
                        name: 'fonts/[name].[ext]'
                    }
                }
            ]
        },
        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
            new CopyPlugin([
                {
                    from: __dirname + '/assets/json',
                    to: __dirname + '/dist/json'
                },
                {
                    from: __dirname + '/node_modules/amcharts-src/amcharts/plugins/export/libs',
                    to: __dirname + '/dist/amcharts/libs'
                },
                {
                    from: __dirname + '/node_modules/amcharts-src/amcharts/images',
                    to: __dirname + '/dist/amcharts/images'
                }
            ]),
            new MiniCssExtractPlugin({
                filename: '[name].css',
                chunkFilename: '[id].css'
            }),
            new HtmlWebpackPlugin({
                template: 'index.html',
                favicon: '../assets/images/favicon.ico',
                inject: true
            })
        ],
        devServer: {
            host: 'localhost',
            port: 9000,
            hot: true,
            proxy: {
                '/isoneplc': 'http://localhost:9001',
                '/csv-convert': 'http://localhost:9001'
            },
            allowedHosts: [
                '#####.localhost',
                '#####.localhost',
                '#####.localhost',
                '#####.localhost',
                '#####.localhost',
                '#####.localhost',
                '#####.localhost'
            ]
        }
    };

    config.mode = env.production ? 'production' : 'development';

    if (env.production) {
        log('adding source maps');
        log('adding optimizations');
        config.devtool = 'source-map';
        config.optimization = {
            minimizer: [
                new UglifyJsPlugin({
                    parallel: true
                }),
                new OptimizeCSSAssetsPlugin({
                    cssProcessorPluginOptions: {
                        preset: ['default', { discardComments: { removeAll: true } }]
                    }
                })
            ],
            splitChunks: {
                chunks: 'all'
            }
        };
        config.plugins.push(new BundleAnalyzerPlugin());
    } else if (env.production && HOST === '##########.com') {
        config.devtool = 'source-map';
        log('adding source maps');
    }

    return config;
};

Upvotes: 1

Views: 1923

Answers (1)

riegersn
riegersn

Reputation: 2849

After some debugging of [email protected] package, in lib/adapter.js:170 I was able to print out the result object before it was processed. The object contained the filename and lineno of the error, info that was not provided when running the tests.

The culprit was an es6 js file that wasn't getting processed by webpack, the browser ran into some es6 code and didn't know how to handle it. The file was actually unneeded, so once I removed it this issue was resolved.

Upvotes: 2

Related Questions