Setting up Test Environment for React with Webpack and Karma

Greeter.js

import React from 'react';

const Greeter = ({name,place}) => (
  <h1>Hello,{name}. Welcome to the {place}.</h1>		
);

export default Greeter;

GreeterSpec.js

import {expect} from 'chai';
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import Greeter from '../Greeter.js';

describe('Greeter React Component',function(){
   it('renders correctly with a name and a place',function() {
      const component = ReactTestUtils
	 .renderIntoDocument(<Greeter name='Vamsi' place='Hotel California'/>);
     /*
        1. check that the element is of type h1 
      */ 
      var span = component.findRenderedDOMComponentWithTag('h1');
      expect(span).to.be.ok;
   });
});

karma.conf.js

// Karma configuration
// Generated on Sat Apr 16 2016 03:50:26 GMT+1000 (AEST)

var webpackConfig = require('./webpack.config.test.js');

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha'],


    // list of files / patterns to load in the browser
    files: [
      'node_modules/chai/chai.js',
      'test/*.js'       
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/*.js':['webpack','sourcemap'] 
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome', 'Firefox'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,

    //point to the webpack config to be used for testing
    webpack:webpackConfig,
    webpackMiddleware:{
      noInfo:true
    }
  })
}

webpack.config.test.js

var webpack = require('webpack');

module.exports = {
  entry:'./index.js',
  output:{
    path:'build',
    filename:'bundle.js'
  },
  module:{
    loaders:[
      {
        test:/\.jsx?$/,
	loader:'babel',
	exclude:/node_modules/,
	query:{
	  cacheDirectory:true
	}
      }
    ]
  },
  devtool:'inline-source-map'
};