Question

我有一个使用Webpack，Angular 4和ES6模块的应用程序。该应用程序按预期工作。

我还使用Karma和Jasmine进行单元测试设置。作为测试设置的一部分，我有一个test-main.js，如下所示：

Error.stackTraceLimit = Infinity;

import 'core-js/es6';
import 'core-js/es7/reflect';
import 'reflect-metadata';
import 'zone.js';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/proxy';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';

import {TestBed} from '@angular/core/testing';
import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';

let appContext = require.context('./', true, /\.spec\.js/);

appContext.keys().forEach(appContext);

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

单元测试按预期运行。

我正在尝试设置覆盖率报告，但我能够实现的最好的是覆盖率报告，其中整个Webpack生成的捆绑包在覆盖率报告中进行检测和报告。如你所想，这并不完全有用。

我已尝试使用babel-plugin-istanbul和istanbul-instrumenter-loader，我要么在覆盖率报告中获取整个捆绑文件，要么根本没有报告。我没有看到任何错误，我的测试继续按预期运行。

这是我的karma.conf.js文件（由于它不起作用而删除了覆盖范围）：

// Karma configuration
// Generated on Thu May 04 2017 13:00:28 GMT+0100 (GMT Daylight Time)
'use strict';

const webpack = require('webpack');
const path = require('path');

let reporters = ['progress'],
    singleRunSwitch = true,
    browsers = ['ChromeHeadless'];

function isDebug(argument) {
    return argument === 'debug';
}

if (process.argv.some(isDebug)) {        
    reporters = ['progress'];
    singleRunSwitch = false;
    browsers = ['Chrome'];
}

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            { pattern: './test-main.js' }
        ],
        exclude: [],
        preprocessors: {
            './test-main.js': ['webpack', 'sourcemap']
        },
        reporters: reporters,
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: browsers,

        customLaunchers: {
            ChromeHeadless: {
                base: 'Chrome',
                flags: [
                  '--headless',
                  ' --remote-debugging-port=9222',
                  '--disable-gpu',
                  '--disable-plugins',
                  '--window-size=0,0',
                  '--window-position=-9999,0'
                ],
            },
        },
        singleRun: singleRunSwitch,
        concurrency: Infinity,

        webpack: {
            module: {
                rules: [{
                    test: /\.js$/,
                    exclude: path.join(__dirname, '../node_modules/'),
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015']
                        }
                    }]
                }]
            },
            devtool: 'inline-source-map',
            plugins: [
                new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname))
            ]
        },

        webpackMiddleware: {
            stats: 'errors-only'
        },

        webpackServer: {
            noInfo: true
        }

    });
}

有人可以建议我需要使用哪些插件以及我应该如何配置它们？

Answer 1

我使用它，我使用伊斯坦布尔和istanbul-instrumenter-loader - 都是通过NPM安装的。我的karma.conf.js文件现在看起来像这样：

// Karma configuration
// Generated on Thu May 04 2017 13:00:28 GMT+0100 (GMT Daylight Time)
'use strict';

const webpack = require('webpack');
const path = require('path');

let reporters = ['progress', 'coverage'],
    singleRunSwitch = true,
    browsers = ['ChromeHeadless'];

function isDebug(argument) {
    return argument === 'debug';
}

if (process.argv.some(isDebug)) {
    reporters = ['progress'];
    singleRunSwitch = false;
    browsers = ['Chrome'];
}

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            { pattern: './test-main.js' }
        ],
        exclude: [],
        preprocessors: {
            './test-main.js': ['webpack', 'sourcemap']
        },
        reporters: reporters,            
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: browsers,
        customLaunchers: {
            ChromeHeadless: {
                base: 'Chrome',
                flags: [
                  '--headless',
                  '--remote-debugging-port=9222',
                  '--disable-gpu',
                  '--disable-plugins',
                  '--window-size=0,0',
                  '--window-position=-9999,0'
                ],
            },
        },
        singleRun: singleRunSwitch,
        concurrency: Infinity,
        webpack: {
            module: {
                rules: [{
                    test: /\.spec.js$/,
                    exclude: [path.join(__dirname, '../node_modules/'), /\.html$/],
                    use: [{
                        loader: 'babel-loader',
                        options: { presets: ['es2015'] }
                    }]
                }, {
                    test: /\.js$/,
                    exclude: [path.join(__dirname, '../node_modules/'), /\.spec.js$/, /\.html$/, /test-main.js/],
                    use: [{
                        loader: 'istanbul-instrumenter-loader',
                    }, {
                        loader: 'babel-loader',
                        options: { presets: ['es2015'] }
                    }]
                }]
            },
            devtool: 'inline-source-map',
            plugins: [
                new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname))
            ]
        },
        webpackMiddleware: {
            stats: 'errors-only'
        },
        webpackServer: {
            noInfo: true
        }
    });
}

配置实际上非常简单;我不得不添加一个'覆盖'报告器（但不是在调试时），并且必须添加一个新的module.rules Webpack配置 - 这里实际上有两个配置;我必须通过Babel与其余的.js文件分别运行spec文件，然后将instanbul-intrumenter添加到除rules之外的.js文件的*.spec.js数组中（另外排除一堆东西！）

使用Angular 4，Webpack 2，Karma和Jasmine进行单元测试覆盖

1 个答案: