I am trying to set up code coverage for an ES6 react project. I got karma with code coverage to work, but its showing inaccurate numbers for the code coverage. I currently don't have any unit test written and its showing coverage for files. Here is my karma config file
var istanbul = require('browserify-istanbul');
module.exports = function (config) {
config.set({
base: './',
browsers: ['Chrome'],
singleRun: false,
autoWatch: true,
frameworks : [ 'jasmine', 'browserify'],
files: [
'js/**/*.js'
],
exclude: [ 'js/app.js' ],
preprocessors: {
'js/**/*.js': [ 'browserify' ]
},
browserify: {
configure: function(bundle){
bundle.on('prebundle', function(){
bundle
.transform(istanbul)
})
},
transform: [
['babelify', { presets: ['es2015', 'react'] }]
],
debug: true, // make stack traces readable.
},
reporters: [ 'progress', 'dots', 'coverage' ],
coverageReporter: {
type : 'text',
dir : 'coverage/'
}
});
};
The output is this
All files | 72.72 | 40.35 | 48.72 | 71.28 |
Related
I wrote unit tests for a small reach application using Jasmine and Karma.And Karma is running slow for these tests.
This is my karma config:
var unitTestReportOutputDir = 'unit-test-report';
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
reporters: ['dots'],
port: 9876,
colors: false,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
autoWatchBatchDelay: 300,
exclude: ['./test/data/*.js'],
files: [
'tests.webpack.js'],
preprocessors: {
'tests.webpack.js': ['webpack']
},
webpack: require('./webpack.config.js'),
webpackMiddleware: {
noInfo: true
},
htmlReporter: {
outputDir: unitTestReportOutputDir, // where to put the reports
focusOnFailures: true, // reports show failures on start
namedFiles: true, // name files instead of creating sub-directories
pageTitle: 'Unit Test Report', // page title for reports; browser info by default
urlFriendlyName: false, // simply replaces spaces with _ for files/dirs
reportName: 'test-summary', // report summary filename; browser info by default
// experimental
preserveDescribeNesting: false, // folded suites stay folded
foldAll: false, // reports start folded (only with preserveDescribeNesting)
}
});
}
This is my webpack.config.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
var UglifyJsPlugin = require('uglify-js-plugin');
const path = require('path');
module.exports = {
devtool: 'inline-source-map',
entry: ['./src/index.js'],
output: {path: path.resolve(__dirname, "builds"), filename: 'bundle.js'},
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.sass$/,
exclude: '/node_modules/',
use: ExtractTextPlugin.extract({
fallback: "style-loader",
loader: "css-loader!sass-loader"
})
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.sass']
},
plugins: [
new ExtractTextPlugin({
filename: "stylesheets/style.css",
disable: false,
allChunks: true
}),
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
})
]
};
What do you guys usually do to speed up Karma in running unit tests ?
I put the code at: https://github.com/zainulfranciscus/karma-test
karma took 1 min 15 sec to start and 33 seconds to ran the tests, whenever I updated a test. There are 35 unit tests
Thank you.
Check out the karma-parallel plugin here:
https://www.npmjs.com/package/karma-parallel
More popular and karma-webpack compatible compared to the karma-sharding plugin.
Have you looked at karma-sharding? This plugin addresses some memory usage problems with some browsers, and numerous or memory intensive specs.
It will not run your tests all in parallel, but as of version 4.0.0, it supports parallel browser execution(i.e. will shard tests across browsers listed in your karma.conf.js)
I'm building a project with angularJS in ES6.
I'm trying to config karma test runner and coverage with istanbul.
When I try to lauch unit test with Karma, I've following error :
Use of reserved word 'class'
This is my karma config file :
var path = require('path');
module.exports = function (config) {
config.set({
basePath: '',
plugins: [
'karma-coverage',
'karma-jasmine',
'karma-phantomjs-launcher',
'karma-webpack',
'karma-coverage-istanbul-reporter'
],
frameworks: ['jasmine'],
files: [
'tests/index.js'
],
preprocessors: {
'tests/index.js': 'webpack'
},
webpack: {
module: {
rules: [{
test : /\.js$/,
use : {
loader: 'istanbul-instrumenter-loader',
query : {
esModules: true
}
},
include: path.resolve('src/')
}, {
test: /\.html$/, loaders: ["html-loader"]
}, {
test: /\.less$/,
use : [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
}, {
test : /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'url-loader'
}]
}
},
reporters: ['progress', 'coverage-istanbul'],
coverageIstanbulReporter: {
reports : ['text-summary'],
fixWebpackSourcePaths: true
},
port : 9876,
colors : true,
logLevel : config.LOG_INFO,
autoWatch : true,
browsers : ['PhantomJS'],
singleRun : true,
concurrency: Infinity,
})
};
And this is my tests/index.js file
// requires all tests in `project/test/src/components/**/index.js`
const tests = require.context('./specs/', true, /index\.js$/);
tests.keys().forEach(tests);
// requires all components in `project/src/components/**/index.js`
const components = require.context('../src/', true, /\.js$/);
components.keys().forEach(components);
Did I miss something ?
Thanks.
PhantomJS currently doesn't support es2015+.
So you either need a transpiler loader like babel-loader,
or you need to install PhantomJS beta which supports new syntax.
In an AngularJS 1 project we use Gulp to compile the project with webpack and test it with Karma. We cannot get sourcemaps to work as expected.
I found the obvious plug-in (https://www.npmjs.com/package/karma-sourcemap-loader) but this seems to exist only to use sourcemaps while debugging karma tests, NOT to display a usable stacktrace.
I also found https://www.npmjs.com/package/karma-source-map-support which seems to be exclusive for browserify.
Am I missing something here? Has anyone gotten this to work?
Appended info:
This is the unusable output (note index.module.js, the webpack compiled file, which has inline sourcemaps):
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 629 of 629 (1 FAILED) (6.663 secs / 6.531 secs)
TOTAL: 1 FAILED, 628 SUCCESS
1) should A B not be A B
TrajectDetails Controller _aMethod()
Expected Object({ a: Object({ x: [ 'A', 'B' ] }) }) not to be Object({ materieel: Object({ x: [ 'A', 'B' ] }) }).
.tmp/serve/app/index.module.js:93820:42
[11:02:26] 'test' errored after 9.37 s
[11:02:26] Error: Failed 1 tests.
This is how my karma config looks:
var preprocessors = {};
pathSrcJs.forEach(function (path) {
preprocessors[path] = ['babel', 'sourcemap'];
});
pathSrcHtml.forEach(function (path) {
preprocessors[path] = ['ng-html2js'];
});
var configuration = {
files: listFiles(),
preprocessors: preprocessors,
singleRun: true,
colors: true,
autoWatch: false,
ngHtml2JsPreprocessor: {
stripPrefix: conf.paths.src + '/',
moduleName: 'xx-xx'
},
logLevel: 'INFO',
frameworks: ['source-map-support', 'jasmine'],
browsers: ['PhantomJS'],
plugins: [
'karma-phantomjs-launcher',
'karma-coverage',
'karma-jasmine',
'karma-ng-html2js-preprocessor',
'karma-spec-reporter',
'karma-babel-preprocessor',
'karma-sourcemap-loader',
'karma-source-map-support'
],
reporters: ['progress', 'spec'],
};
config.set(configuration);
Webpack config is like this:
var webpackOptions = {
watch: watch,
module: {
loaders: [{test: /\.js$/, exclude: /node_modules/, loaders: ['ng-annotate', 'babel-loader']}]
},
output: {filename: output},
devtool = 'inline-source-map'
};
var sources = [path.join(conf.paths.src, source)];
sources.push(path.join(conf.paths.src, '/app/**/*.spec.js'));
return gulp.src(sources)
.pipe(webpack(webpackOptions))
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app')));
I am using Karma to write my test scripts and here is my karma.conf.js code
'use strict';
/**
* Module dependencies.
*/
var _ = require('lodash'),
karmaReporters = ['spec', 'coverage'];
//Karma configuration
module.exports = function (karmaConfig) {
karmaConfig.set({
preprocessors: {
'./index.html': ['ng-html2js'],
'./app/*/modules/*/views/**/*.html': ['ng-html2js'],
'./app/config.js': ['coverage'],
'./app/application.js': ['coverage'],
'./app/*/modules/*/client/*.js': ['coverage'],
'./app/*/modules/*/client/config/*.js': ['coverage'],
'./app/*/modules/*/client/controllers/*.js': ['coverage'],
'./app/*/modules/*/client/directives/*.js': ['coverage'],
'./app/*/modules/*/client/services/*.js': ['coverage']
},
ngHtml2JsPreprocessor: {
moduleName: 'myApp',
cacheIdFromPath: function (filepath) {
return filepath;
}
},
// List of files / patterns to load in the browser
files: [
'./public/libs/angular/angular.js',
'./public/libs/angular-mocks/angular-mocks.js',
'./public/libs/angular-animate/angular-animate.js',
'./public/libs/angular-cookies/angular-cookies.js',
'./public/libs/angular-resource/angular-resource.js',
'./public/libs/angular-route/angular-route.js',
'./public/libs/angular-sanitize/angular-sanitize.js',
'./public/libs/angular-ui-router/release/angular-ui-router.js',
'./public/constants/constants.js',
'./app/config.js',
'./app/application.js',
'./app/*/modules/*/client/*.js',
'./app/*/modules/*/client/**/*.js',
'./app/*/modules/*/tests/unit/*.js',
'./index.html',
'./app/*/modules/*/client/views/**/*.html'
],
basePath: './',
//frameworks to use
frameworks: ['jasmine'],
// Test results reporter to use
// Possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: karmaReporters,
// Configure the coverage reporter
coverageReporter: {
dir: './coverage/client',
reporters: [
// Reporters not supporting the `file` property
{type: 'html', subdir: 'report-html'},
{type: 'lcov', subdir: 'report-lcov'},
// Output coverage to console
{type: 'text'}
],
instrumenterOptions: {
istanbul: {noCompact: true}
}
},
// Level of logging
// Possible values: karmaConfig.LOG_DISABLE || karmaConfig.LOG_ERROR || karmaConfig.LOG_WARN ||
// karmaConfig.LOG_INFO || karmaConfig.LOG_DEBUG
logLevel: karmaConfig.LOG_INFO,
browsers: ['Chrome'],
autoWatch: true,
singleRun: true,
colors: true
});
};
As per I remember it was working fine for certain time and due to some changes I am getting this error suddenly and I couldn't figure out what could be the issue.
Uncaught Error: [$location:no/path/to/my/app] $location in HTML5 mode requires a </path/to/my/app> tag to be present!
I have base url defined in my index file but still I am getting this error while running test scripts
I am having problems getting Istanbul to output it's HTML report to the directory specified in my Karma config. It currently outputs the main index.html in the correct directory(reports/coverage) but the detailed html child pages are output to the same directory as the source file(www/js/...). It is the same problem described here and here, but after trying the suggested solution the problem persists.
This is the contents of my karma config file:
basePath: './',
frameworks: ['jasmine'],
files: [
'www/lib/angular/angular.js',
'www/js/*.js',
'www/js/services/*.js',
'www/js/controllers/*.js',
'www/lib/angular-mocks/angular-mocks.js',
'tests/**/*test.js',
'tests/test-data/*.json'
],
plugins: [
'karma-jasmine',
'karma-coverage',
'karma-phantomjs-launcher',
'karma-ng-json2js-preprocessor'
],
preprocessors: {
'www/js/**/*.js': ['coverage'],
'tests/**/*.json': ['ng-json2js']
},
ngJson2JsPreprocessor: {
stripPrefix: 'tests/test-data/',
prependPrefix: 'served/'
},
reporters: ['progress', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: true,
coverageReporter: {
// Common output directory
dir: 'coverage',
reporters: [
{ type: 'text-summary'},
{ type: 'html', subdir:'report-html' }
]
}
Suggestions on how to resolve this so all of the coverage files are placed into the reports/coveragedirectory would be much appreciated. Thanks.
I have wrestled with this myself and found that I had to be a little more explicit in the reporters portion of the coverageReporter config by specifying the directory and the subdirectory for each.
coverageReporter: {
reporters: [
{ type: 'text-summary', dir: 'coverage/' },
{ type: 'html', dir: 'coverage/', subdir: 'report-html' }
]
}
I can't explain why that combination ultimately worked for me, but after multiple permutations that was what I ended up at.