add Karma, TAP and webpack boilerplate test settings to projects

Setting Karma with many plugins it´s a time consuming process, many hours of trial and error. Now you have it all for free.

• karma-tap, karma TAP adapter.
• karma-tap-pretty-reporter cause everyone need a nice output. See supported prettifiers
• tape for test harness on node and browsers.
• karma browser launchers karma-chrome-launcher, karma-jsdom-launcher, ...
• webpack and karma-webpack

• When we test code on browsers at the end we will need bundle: sources, test files and assets, other solutions can be use like browserify but we opinionated on webpack
• When Hot Module Replacement (HMR) is needed, webpack is the way to go.
• On Karma autowatch mode for a good performance a robust cache and rebuild solution is needed, webpack is best on this apart.

If your project tests need

• browsers launch/switch/management
• file bundle
• file watch mode

Karma will provide it!

npm install karma webpack carma-tap-webpack --save-dev

const carma = require('carma-tap-webpack');

module.exports = function(config) {
  carma(config);
}

Custom karma settings can be added or defaults can be override. Defaults settings karma.conf.js

  "scripts": {
    "karma": "karma start",
    "testonly": "npm run karma",
    "test": "npm run testonly"
  },

By default Karma will search for files on project root test folder but this can be customize.

Example of project´s karma.conf.js

const carma = require('carma-tap-webpack');
const webpack = require('webpack');

module.exports = function(config) {
  carma(config);
  config.set({  // overriding inherited settings
    // Set browser launcher
    browsers: process.env.CONTINUOUS_INTEGRATION === 'true' ? ['Firefox'] : ['jsdom'],

    webpack: {
      plugins: [
        // __TEST_DIR__ path '../../' is relative to inherited 'basePath' from  'carma'
        // __TEST_REGX__ file pattern match
        new webpack.DefinePlugin({
          '__TEST_DIR__': JSON.stringify('../../' + 'spec'),
          '__TEST_REGX__': /^.+\.(js|jsx)+$/g
        })
      ]
    }
  });
}

• React Scrollchor
• React Scrollaware

• Documentation improvement
• Feel free to send any PR

ISC