Carma-tap-webpack NPM

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