node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »

webpack-karma-jasmine

Installation

This one package will let you use karma in your projects. Use npm install webpack-karma-jasmine instead of installing all dependencies and loaders separately.

If you want to test your .html files with DOM see karma-html package.

This package is the suggestion of karma configuretion. It uses:

  • karma-webpack and babel-loader to compile ES2015 javascript features and bundle specs and tests .js files together
  • karma-jasmine (to use another framework, install it manually)
  • karma-mocha-reporter bash reporter
  • karma-jasmine-html-reporter browser reporter

The following dependencies will be installed:

Package name
webpack
karma
karma-webpack
karma-jasmine
jasmine-core
karma-phantomjs-launcher
karma-chrome-launcher
karma-firefox-launcher
karma-edge-launcher
karma-ie-launcher
karma-opera-launcher
karma-safari-launcher
karma-mocha-reporter
karma-spec-reporter
karma-jasmine-html-reporter
karma-cli (globally)

Configuration

create karma.conf.js

The suggestion of karma.conf.js configuration

karma.conf.js
module.exports = function(config) {
  config.set({
    //root path location to resolve paths defined in files and exclude 
    basePath: '',
    //files/patterns to exclude from loaded files 
    exclude: [],
    //files/patterns to load in the browser 
    files: [
      {pattern: 'src/*.js', watched:true, served:false, included:false, nocache:false},
      {pattern: 'tests/*.js',watched:true,served:true,included:true}
      /*parameters*/
          //watched: if autoWatch is true all files that have set watched to true will be watched for changes 
          //served: should the files be served by Karma's webserver? 
          //included: should the files be included in the browser using <script> tag? 
          //nocache: should the files be served from disk on each request by Karma's webserver? 
      /*assets*/
          //{pattern: '*.html', watched:true, served:true, included:false} 
          //{pattern: 'images/*', watched:false, served:true, included:false}       
    ],
    
    //executes the tests whenever one of watched files changes 
    autoWatch: true,
    //if true, Karma will run tests and then exit browser 
    singleRun:false,
    //if true, Karma fails on running empty test-suites 
    failOnEmptyTestSuite:false,
    //reduce the kind of information passed to the bash 
    logLevel: config.LOG_WARN, //config.LOG_DISABLE, config.LOG_ERROR, config.LOG_INFO, config.LOG_DEBUG 
                                      
    //list of frameworks you want to use, only jasmine is installed automatically 
    frameworks: ['jasmine'],
    //list of browsers to launch and capture 
    browsers: ['Chrome'/*,'PhantomJS','Firefox','Edge','ChromeCanary','Opera','IE','Safari'*/],
    //list of reporters to use 
    reporters: ['mocha','kjhtml'/*,'dots','progress','spec'*/],
    
    //address that the server will listen on, '0.0.0.0' is default 
    listenAddress: '0.0.0.0',
    //hostname to be used when capturing browsers, 'localhost' is default 
    hostname: 'localhost',
    //the port where the web server will be listening, 9876 is default 
    port: 9876,
 
    //when a browser crashes, karma will try to relaunch, 2 is default 
    retryLimit:0,
    //how long does Karma wait for a browser to reconnect, 2000 is default 
    browserDisconnectTimeout: 5000,
    //how long will Karma wait for a message from a browser before disconnecting from it, 10000 is default 
    browserNoActivityTimeout: 10000,
    //timeout for capturing a browser, 60000 is default 
    captureTimeout: 60000,
 
    client: {
        //capture all console output and pipe it to the terminal, true is default 
        captureConsole:false,
        //if true, Karma clears the context window upon the completion of running the tests, true is default 
        clearContext:false,
        //run the tests on the same window as the client, without using iframe or a new window, false is default 
        runInParent: false,
        //true: runs the tests inside an iFrame; false: runs the tests in a new window, true is default 
        useIframe:true,
        jasmine:{
            //tells jasmine to run specs in semi random order, false is default 
            random: false
        }
    },
 
    /*karma-webpack config*/
    preprocessors: {
      //use webpack to support require() in test-suits .js files 
      //use babel-loader from webpack to compile es2015 features in .js files 
      //add webpack as preprocessor 
      './tests/*.js': ['webpack']
    },
    webpackMiddleware: {
      //turn off webpack bash output when run the tests 
      noInfo: true,
      stats: 'errors-only'
    },
 
    /*karma-mocha-reporter config*/
    mochaReporter: {
        output: 'noFailures'  //full, autowatch, minimal 
    }
  });
};
adjust the folders structure

The configuration assumes that the following folder structure is arranged. Adjust basePath and excludes property, files pattern properties, and preprocessors properties to your need.

┌ karma.conf.js
├ src
│  ├ file_a.js
│  └ file_b.js
└ tests
   ├ test_a.js
   └ test_b.js
configure webpack webpack.config.js to compile .js files with babel

Read the webpack-babel-installer docs to configure webpack.config.js file. You can use npm install webpack-babel-loader (or install all babel packages manually).

Set the webpack.config.js
module: {
  rules: [
    {
      test: /\.js$/,
      exclude:/(node_modules)/,
      loader:"babel-loader",
      query:{
        presets:["env"]
      }
    }
  ]
}
The test-suits file example

Require all .js files to be tested in your specs files. The karma-webpack will bundle all required files with test-suits files to be ready to run the tests.

var getModule = require('./../src/some_module.js');
describe("Module should return",function(){
  it("some number",function(){
    expect(getModule()).toEqual(10);
  });
});

Links

Launchers
Reporters

See also