javascript - Karma 覆盖率未达到 100%，但 (0/0)

Question

我正在尝试将我当前的 Angular2 项目与 Karma Coverage 集成。请在下面找到我的 karma 配置。

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

        /**
         * 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'],

        /**
         * List of files to exclude.
         */
        exclude: [],

        client: {
            captureConsole: false
        },

        /**
         * List of files / patterns to load in the browser
         *
         * we are building the test environment in ./spec-bundle.js
         */
        files: [
            { pattern: './config/testing/spec-bundle.js', watched: false },
            { pattern: './client/assets/**/*', watched: false, included: false, served: true, nocache: false }
        ],


        /**
         * 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/testing/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },

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

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

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

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

        /**
         * Test results reporter to use
         *
         * possible values: 'dots', 'progress'
         * available reporters: https://npmjs.org/browse/keyword/karma-reporter
         */
        reporters: ['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_WARN,

        /**
         * 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: [
            'ChromeTravisCi'
        ],

        customLaunchers: {
            ChromeTravisCi: {
                base: 'ChromeHeadless',
                flags: ['--no-sandbox', '--disable-gpu']
            }
        },

        /**
         * Continuous Integration mode
         * if true, Karma captures browsers, runs the tests and exits
         */
        singleRun: true
        /**
         * For slower machines you may need to have a longer browser
         * wait time . Uncomment the line below if required.
         */
        // browserNoActivityTimeout: 30000

    };


    config.set(configuration);
};

覆盖范围摘要报告为

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

问题:我在这里做错了什么吗？如何让 karma 覆盖加载我的文件？这对于我在项目中使用 Express 可能很重要。

这是我的测试 webpack 配置。

    var path = require('path');
const helpers = require('./helpers');

/**
 * Webpack Plugins
 */
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');

/**
 * Webpack Constants
 */
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';

/**
 * Webpack configuration
 *
 * See: https://webpack.js.org/configuration/
 */
module.exports = function (options) {
    return {

        /**
         * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
         *
         * Do not change, leave as is or it wont work.
         * See: https://github.com/webpack/karma-webpack#source-maps
         */
        devtool: 'inline-source-map',

        /**
         * Options affecting the resolving of modules.
         *
         * See: https://webpack.js.org/configuration/resolve/
         */
        resolve: {

            /**
             * An array of extensions that should be used to resolve modules.
             *
             * See: https://webpack.js.org/configuration/resolve/#resolve-extensions
             */
            extensions: ['.ts', '.js'],

            /**
             * Make sure root is src
             */
            modules: [helpers.root('client'), 'node_modules']

        },

        /**
         * Options affecting the normal modules.
         *
         * See: https://webpack.js.org/configuration/module/
         *
         * 'use:' revered back to 'loader:' as a temp. workaround for #1188
         * See: https://github.com/gdi2290/angular-starter/issues/1188#issuecomment-262872034
         */
        module: {

            rules: [

                /**
                 * Source map loader support for *.js files
                 * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
                 *
                 * See: https://github.com/webpack/source-map-loader
                 */
                {
                    enforce: 'pre',
                    test: /\.js$/,
                    loader: 'source-map-loader',
                    exclude: [
                        /**
                         * These packages have problems with their sourcemaps
                         */
                        helpers.root('node_modules/rxjs'),
                        helpers.root('node_modules/@angular'),
                        helpers.root('node_modules/@angular/compiler'),
                        path.join(process.cwd(), 'node_modules')
                    ]
                },

                /**
                 * Typescript loader support for .ts and Angular 2 async routes via .async.ts
                 *
                 * See: https://github.com/s-panferov/awesome-typescript-loader
                 */
                {
                    test: /\.ts$/,
                    use: [
                        {
                            loader: 'awesome-typescript-loader',
                            query: {
                                /**
                                 * Use inline sourcemaps for "karma-remap-coverage" reporter
                                 */
                                configFileName:  'tsconfig.test.json',
                                sourceMap: false,
                                inlineSourceMap: true,
                                compilerOptions: {

                                    /**
                                     * Remove TypeScript helpers to be injected
                                     * below by DefinePlugin
                                     */
                                    removeComments: true

                                }
                            }
                        },
                        'angular2-template-loader'
                    ],
                    exclude: [/\.e2e\.ts$/]
                },

                /**
                 * Raw loader support for *.css files
                 * Returns file content as string
                 *
                 * See: https://github.com/webpack/raw-loader
                 */
                {
                    test: /\.css$/,
                    loader: ['to-string-loader', { loader: 'css-loader', options: { url: false } }],
                    exclude: [helpers.root('client/index.html')]
                },

                /**
                 * Raw loader support for *.scss files
                 *
                 * See: https://github.com/webpack/raw-loader
                 */
                {
                    test: /\.scss$/,
                    loader: ['raw-loader', 'sass-loader'],
                    exclude: [helpers.root('client/index.html')]
                },

                /**
                 * Raw loader support for *.html
                 * Returns file content as string
                 *
                 * See: https://github.com/webpack/raw-loader
                 */
                {
                    test: /\.html$/,
                    loader: 'raw-loader',
                    exclude: [helpers.root('client/index.html')]
                },

                /**
                 * Instruments JS files with Istanbul for subsequent code coverage reporting.
                 * Instrument only testing sources.
                 *
                 * See: https://github.com/deepsweet/istanbul-instrumenter-loader
                 */
                {
                    enforce: 'post',
                    test: /\.(js|ts)$/,
                    loader: 'istanbul-instrumenter-loader',
                    include: helpers.root('client'),
                    exclude: [
                        /\.(e2e|spec)\.ts$/,
                        /node_modules/
                    ]
                }

            ]
        },

        /**
         * Add additional plugins to the compiler.
         *
         * See: https://webpack.js.org/configuration/plugins/
         */
        plugins: [

            /**
             * Plugin: DefinePlugin
             * Description: Define free variables.
             * Useful for having development builds with debug logging or adding global constants.
             *
             * Environment helpers
             *
             * See: https://webpack.js.org/plugins/define-plugin/
             *
             * NOTE: when adding more properties make sure you include them in custom-typings.d.ts
             */
            new DefinePlugin({
                'ENV': JSON.stringify(ENV),
                'HMR': false,
                'process.env': {
                    'ENV': JSON.stringify(ENV),
                    'NODE_ENV': JSON.stringify(ENV),
                    'HMR': false,
                }
            }),

            /**
             * Plugin: ContextReplacementPlugin
             * Description: Provides context to Angular's use of System.import
             *
             * See: https://webpack.js.org/plugins/context-replacement-plugin/
             * See: https://github.com/angular/angular/issues/11580
             */


            new ContextReplacementPlugin(
                // The (\\|\/) piece accounts for path separators in *nix and Windows
                /angular(\\|\/)core(\\|\/)@angular/,
                helpers.root('client'), // location of your src
                {} // a map of your routes
            ),

            /**
             * Plugin LoaderOptionsPlugin (experimental)
             *
             * See: https://gist.github.com/sokra/27b24881210b56bbaff7
             */
            new LoaderOptionsPlugin({
                debug: false,
                options: {
                    /**
                     * legacy options go here
                     */
                }
            })

        ],

        /**
         * Disable performance hints
         *
         * See: https://github.com/a-tarasyuk/rr-boilerplate/blob/master/webpack/dev.config.babel.js#L41
         */
        performance: {
            hints: false
        },

        /**
         * Include polyfills or mocks for various node stuff
         * Description: Node configuration
         *
         * See: https://webpack.js.org/configuration/node/
         */
        node: {
            global: true,
            crypto: 'empty',
            process: false,
            module: false,
            clearImmediate: false,
            setImmediate: false,
            fs: 'empty'
        }

    };
};

Answer 1

在您的 Kamar-config 文件中，您似乎缺少一个预处理器来指示要覆盖的源文件。我了解 './config/testing/spec-bundle.js' 仅用于测试文件...

{
  preprocessors: {'./src/**/*.ts': ['coverage']}
}

https://github.com/karma-runner/karma-coverage