Setup coverage more correctly with karma-coverage, babel-plugin-istanbul

Rija Menage · Rija Menage · commit f5f8c4f28dc3 · 2019-12-17T22:10:05.000+08:00
Now there is a proper babel config file (babel.config.js) where the istanbul plugin is mentioned
for the test environment only. Which means that I need the cross-env package to be able to specify to karma command
which babel environment to pass.

Now that babel has a config file the loader rule in webpack config file can be simpler

The coverage report is still odd (I think code instrumentation may not happen properly),
but at least the configuration is in a better state than before
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,17 @@
+module.exports = function (api) {
+
+	console.log('********** Loading Babel config ***************************');
+  api.cache(true);
+
+  const presets = [ '@babel/preset-env' ];
+  // const plugins = [ 'istanbul' ];
+
+  return {
+    presets,
+    "env": {
+            "test": {
+                "plugins": ["istanbul"]
+            }
+        }
+  };
+}
diff --git a/karma.conf.js b/karma.conf.js
@@ -8,20 +8,19 @@ module.exports = function(config) {
     frameworks: ['jasmine'],
 
     files: [
-      // 'test/**/*.spec.js'
       'test/testloader.js'
     ],
 
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-      // '**/*.spec.js': ['webpack']
+    preprocessors: { //do not add 'coverage' here, as code already instrumented in babel plugin
+      'src/**/*.js': ['webpack'],
       'test/testloader.js': ['webpack']
     },
 
     webpack: webpackConfig,
 
-    reporters: ['spec'],
+    reporters: ['spec', 'coverage'],
 
     coverageReporter: {
       dir: './coverage',
diff --git a/package.json b/package.json
@@ -15,10 +15,12 @@
     "@vue/test-utils": "^1.0.0-beta.30",
     "babel-loader": "^8.0.6",
     "babel-plugin-istanbul": "^5.2.0",
+    "cross-env": "^6.0.3",
     "css-loader": "^3.3.2",
     "jasmine-core": "^3.5.0",
     "karma": "^4.4.1",
     "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage": "^2.0.1",
     "karma-firefox-launcher": "^1.2.0",
     "karma-jasmine": "^2.0.1",
     "karma-spec-reporter": "0.0.32",
@@ -29,7 +31,7 @@
     "webpack-cli": "^3.3.10"
   },
   "scripts": {
-    "test": "karma start --no-watch --no-progress",
+    "test": "cross-env BABEL_ENV=test karma start --no-watch --no-progress",
     "build": "webpack"
   },
   "author": "Rija Menage",
diff --git a/webpack.config.js b/webpack.config.js
@@ -20,14 +20,9 @@ module.exports = {
         ]
       },
       {
-        test: /\.m?js$/,
-        exclude: /(node_modules|bower_components)/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env']
-          }
-        }
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
       }
     ]
   },

Original file line number	Diff line number	Diff line change
`@@ -20,14 +20,9 @@ module.exports = {`
`20`	`20`	`]`
`21`	`21`	`},`
`22`	`22`	`{`
`23`		`- test: /\.m?js$/,`
`24`		`- exclude: /(node_modules\|bower_components)/,`
`25`		`- use: {`
`26`		`- loader: 'babel-loader',`
`27`		`- options: {`
`28`		`- presets: ['@babel/preset-env']`
`29`		`- }`
`30`		`- }`
	`23`	`+ test: /\.js$/,`
	`24`	`+ loader: 'babel-loader',`
	`25`	`+ exclude: /node_modules/`
`31`	`26`	`}`
`32`	`27`	`]`
`33`	`28`	`},`