Installation

This boilerplate 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 configuration. 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

Sample

git clone https://github.com/devrafalko/webpack-karma-jasmine.git
cd webpack-karma-jasmine/sample
npm install
npm test

Configuration

This is the full description of the sample above.

1. Install all dependencies

1npm install webpack webpack-cli webpack-karma-jasmine

2. create karma.conf.js file

The suggestion of karma.conf.js configuration

1module.exports = function (config) {
2  config.set({
3    //root path location to resolve paths defined in files and exclude
4    basePath: '',
5    //files/patterns to exclude from loaded files
6    exclude: [],
7    //files/patterns to load in the browser
8    files: [
9      { pattern: 'tests/*.js', watched: true, served: true, included: true }
10      /*parameters:
11          watched: if autoWatch is true all files that have set watched to true will be watched for changes
12          served: should the files be served by Karma's webserver?
13          included: should the files be included in the browser using <script> tag?
14          nocache: should the files be served from disk on each request by Karma's webserver? */
15      /*assets:
16          {pattern: '*.html', watched:true, served:true, included:false}
17          {pattern: 'images/*', watched:false, served:true, included:false} */
18    ],
19
20    //executes the tests whenever one of watched files changes
21    autoWatch: true,
22    //if true, Karma will run tests and then exit browser
23    singleRun: false,
24    //if true, Karma fails on running empty test-suites
25    failOnEmptyTestSuite: false,
26    //reduce the kind of information passed to the bash
27    logLevel: config.LOG_WARN, //config.LOG_DISABLE, config.LOG_ERROR, config.LOG_INFO, config.LOG_DEBUG
28
29    //list of frameworks you want to use, only jasmine is installed with this boilerplate
30    frameworks: ['jasmine'],
31    //list of browsers to launch and capture
32    browsers: ['Chrome'/*,'PhantomJS','Firefox','Edge','ChromeCanary','Opera','IE','Safari'*/],
33    //list of reporters to use
34    reporters: ['mocha', 'kjhtml'/*,'dots','progress','spec'*/],
35
36    //address that the server will listen on, '0.0.0.0' is default
37    listenAddress: '0.0.0.0',
38    //hostname to be used when capturing browsers, 'localhost' is default
39    hostname: 'localhost',
40    //the port where the web server will be listening, 9876 is default
41    port: 9876,
42    //when a browser crashes, karma will try to relaunch, 2 is default
43    retryLimit: 0,
44    //how long does Karma wait for a browser to reconnect, 2000 is default
45    browserDisconnectTimeout: 5000,
46    //how long will Karma wait for a message from a browser before disconnecting from it, 10000 is default
47    browserNoActivityTimeout: 10000,
48    //timeout for capturing a browser, 60000 is default
49    captureTimeout: 60000,
50
51    client: {
52      //capture all console output and pipe it to the terminal, true is default
53      captureConsole: false,
54      //if true, Karma clears the context window upon the completion of running the tests, true is default
55      clearContext: false,
56      //run the tests on the same window as the client, without using iframe or a new window, false is default
57      runInParent: false,
58      //true: runs the tests inside an iFrame; false: runs the tests in a new window, true is default
59      useIframe: true,
60      jasmine: {
61        //tells jasmine to run specs in semi random order, false is default
62        random: false
63      }
64    },
65
66    /* karma-webpack config
67       pass your webpack configuration for karma
68       add `babel-loader` to the webpack configuration to make 
69       the ES6+ code in the test files readable to the browser  
70       eg. import, export keywords */
71    webpack: {
72      module: {
73        rules: [
74          {
75            test: /\.js$/i,
76            exclude: /(node_modules)/,
77            loader: 'babel-loader',
78            options: {
79              presets: ['@babel/preset-env']
80            }
81          }
82        ]
83      }
84    },
85    preprocessors: {
86      //add webpack as preprocessor to support require() in test-suits .js files
87      './tests/*.js': ['webpack']
88    },
89    webpackMiddleware: {
90      //turn off webpack bash output when run the tests
91      noInfo: true,
92      stats: 'errors-only'
93    },
94
95    /*karma-mocha-reporter config*/
96    mochaReporter: {
97      output: 'noFailures'  //full, autowatch, minimal
98    }
99  });
100};

3. adjust the folders structure to your needs

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

┌ karma.conf.js
├ package.json
├ webpack.config.js
├ src
│  ├ index.js
│  └ another_module.js
└ tests
   ├ spec_a.js
   └ spec_b.js

4. Add some specs to your test files

tests/spec_a.js

1import myModule from './../src/index.js';
2
3describe("Module should return", function () {
4  it("some number", function () {
5    expect(myModule()).toEqual(10);
6  });
7});

src/index.js

1export default ()=> 10;

5. Run tests:

• add "scripts": { "test": "karma start" } to your package.json and run tests with npm test
• or run karma start in the terminal (but first install karma-cli globally)

1> npm install karma-cli -g

Links

• karma configuration file docs
• karma files docs
• webpack-babel-installer
• babel presets docs
• babel-loader
• karma-webpack (webpack docs)
• karma-webpack (github docs)
• jasmine docs
• karma-jasmine docs

Launchers

• karma-phantomjs-launcher
• karma-chrome-launcher
• karma-firefox-launcher
• karma-edge-launcher
• karma-ie-launcher
• karma-opera-launcher
• karma-safari-launcher

Reporters

• karma-mocha-reporter
• karma-spec-reporter
• karma-jasmine-html-reporter

See also

• karma-html (test your .html files in the browser)
• jasmine-dom-custom-matchers
• webpack-jquery-ui
• webpack-icons-installer
• styles-loader