carma-tap-webpack

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.

This package works only on npm 3 environments and beyond. Don´t use it with npm 2

What's include ?

• 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

Why webpack is needed for test?

• 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.

Why all karma complex setup, why not just use the very simple tape?

If your project tests need

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

Karma will provide it!

Install

npm

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

Add karma.conf.js to project folder

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

Add karma and test scripts to package.json

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

Test directory

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
        })
      ]
    }
  });
}

Projects using carma-tap-webpack

• React Scrollchor
• React Scrollaware

Contributing

• Documentation improvement
• Feel free to send any PR

License

ISC