我使用karma-coverage，browserify生成报道。测试运行正常，但生成的覆盖率报告没有显示正确的文件内容，并显示100％的覆盖率，而实际上只有少数测试。
我的karma.conf.js是：
// Karma configuration
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: ['browserify', 'mocha', 'chai'],
// list of files / patterns to load in the browser
files: [
'bower_components/jquery/dist/jquery.js',
'bower_components/angular/angular.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-dragdrop/src/angular-dragdrop.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-ui-router/release/angular-ui-router.js',
'bower_components/angular-xeditable/dist/js/xeditable.js',
'bower_components/d3/d3.js',
'bower_components/d3-tip/index.js',
'bower_components/jquery-ui/jquery-ui.js',
'bower_components/moment/moment.js',
'bower_components/ng-file-upload/ng-file-upload.js',
'bower_components/ngstorage/ngstorage.js',
'bower_components/restangular/dist/restangular.js',
'bower_components/toastr/toastr.js',
'bower_components/underscore/underscore.js',
'app/components/**/*.js'
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'app/components/**/*.js': ['browserify'],
'app/components/**/!(*.test).js': ['browserify', 'sourcemap', 'coverage']
},
browserify: {
debug: true,
transform: [
'babelify'
],
extensions: ['.js']
},
babelPreprocessor: {
options: {
sourceMap: 'inline',
blacklist: ['useStrict']
},
sourceFileName: function(file) {
return file.originalPath;
}
},
// optionally, configure the reporter
coverageReporter: {
dir: 'coverage/',
reporters: [{
type: 'html',
subdir: 'report-html'
}, {
type: 'cobertura',
subdir: '.',
file: 'cobertura.txt'
}, {
type: 'text',
subdir: '.',
file: 'text.txt'
}, {
type: 'text-summary',
subdir: '.',
file: 'text-summary.txt'
}, ]
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['coverage', 'mocha'],
// 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_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
这是我的package.json
{
"name": "Touchpoint",
"private": true,
"version": "0.0.0",
"repository": "",
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "node server.js",
"mocha": "istanbul cover _mocha -- ./app/components/**/*test.js --compilers js:babel-core/register",
"watch-mocha": "istanbul cover _mocha -- ./app/components/**/*test.js --compilers js:babel-core/register -w",
"karma": "karma start",
"test": "npm run karma --single-run",
"test-suite": "npm run watch-mocha",
"pretest": "npm install",
"pretest-suite": "npm install"
},
"devDependencies": {
"angular": "^1.5.0-rc.2",
"babel": "^6.5.2",
"babel-cli": "6.10.1",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babelify": "^7.3.0",
"body-parser": "^1.15.0",
"bower": "^1.7.9",
"browserify": "^13.0.1",
"browserify-istanbul": "^2.0.0",
"browserify-ngannotate": "^2.0.0",
"bulkify": "^1.4.2",
"chai": "^3.5.0",
"del": "^2.2.0",
"eslint": "^3.4.0",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.4.2",
"eslint-plugin-react": "^5.1.1",
"event-stream": "^3.3.2",
"express": "^4.13.4",
"gulp": "^3.9.1",
"gulp-angular-filesort": "^1.1.1",
"gulp-babel": "^6.1.2",
"gulp-clean-css": "^2.0.10",
"gulp-concat": "^2.6.0",
"gulp-eslint": "^2.0.0",
"gulp-htmlhint": "^0.3.1",
"gulp-htmllint": "0.0.8",
"gulp-htmlmin": "^1.3.0",
"gulp-inject": "^4.1.0",
"gulp-inject-reload": "0.0.2",
"gulp-install": "^0.6.0",
"gulp-jshint": "^2.0.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.2.0",
"gulp-minify-css": "^1.2.4",
"gulp-ng-annotate": "^2.0.0",
"gulp-ng-config": "^1.3.1",
"gulp-ng-html2js": "^0.2.2",
"gulp-nodemon": "^2.0.6",
"gulp-notify": "^2.2.0",
"gulp-open": "^2.0.0",
"gulp-order": "^1.1.1",
"gulp-postcss": "^6.1.1",
"gulp-print": "^2.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-stylelint": "^2.0.2",
"gulp-uglify": "^1.5.3",
"istanbul": "^0.2.16",
"istanbul-coveralls": "^1.0.3",
"jquery": "^3.1.0",
"jshint-stylish": "^2.1.0",
"karma": "^0.13.22",
"karma-babel-preprocessor": "^6.0.1",
"karma-browserify": "^5.1.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^0.2.6",
"karma-coverage-es6": "^0.2.7",
"karma-jasmine": "^1.0.2",
"karma-jquery": "^0.1.0",
"karma-junit-reporter": "^0.3.8",
"karma-mocha": "^1.1.1",
"karma-mocha-reporter": "^2.1.0",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-requirejs": "^1.0.0",
"karma-sinon-chai": "^1.2.3",
"karma-sourcemap-loader": "^0.3.7",
"main-bower-files": "^2.11.1",
"method-override": "^2.3.5",
"mocha": "^3.0.2",
"postcss-nested": "^1.0.0",
"postcss-reporter": "^1.3.3",
"postcss-scss": "^0.1.8",
"protractor": "^3.1.1",
"q": "^1.4.1",
"requirejs": "^2.2.0",
"shelljs": "^0.6.0",
"sinon": "^1.17.5",
"stylelint": "^6.7.1",
"stylelint-scss": "^1.2.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
}
}
我使用npm run karma来运行测试。
我正在使用angular1.5，我的源文件采用es6标准的组件样式。我也使用导入/导出格式。
我获得的覆盖范围是绿色的所有源文件（100％覆盖率），报告中的每个文件都采用以下形式：
typeof require ===＆＃34; function＆＃34; ＆安培;＆安培; 要求（＆＃34; ************************** JS＆＃34;。）;
答案 0 :(得分：4)
我能够使用browserify-istanbul使用browserify transform function来检测我的代码，而不是使用karma-coverage预处理器来解决类似的问题。
npm install browserify-istanbul --save-dev 将browserify-istanbul添加到karma.conf.js的browserify转换部分：
transform: [
'babelify',
['browserify-istanbul',
{
instrumenterConfig: {
embedSource: true // this is important for HTML reports
}
}
]
]
从源预处理器中删除coverage，所以它只是：
preprocessors: {
'app/components/**/*.js': ['browserify'],
'app/components/**/!(*.test).js': ['browserify', 'sourcemap'] // no more 'coverage' here
}
现在，当karma运行browserify预处理器时，代码将由istanbul检测（因为转换函数），并且覆盖率报告应该看起来正确。