I’ve been meaning to get back to blogging, and I thought this was a good topic to cover.

After going through some React courses lately, webpack has quickly become an indispensible tool for me. It loads and transpiles everything, and makes a nice neat bundle. It’s my go-to tool for new projects now.

When setting up the unit tests for my GitHub Pull Request Dashboard, things weren’t quite as smooth as with some of my past projects. For promise-poller, I just installed Jasmine, wrote the specs, and ran them with the jasmine command. Nice and easy.

But with a React project, you might need to write some JSX in your tests. Or maybe you just want to use full ES2015 syntax. So setting up the test infrastructure in this case isn’t quite as simple (but still really easy).

I couldn’t figure out how to get just Jasmine running with webpack, but adding Karma did the trick nicely. Here’s a quick overview of how to get it up and running.

First, I’m going to assume you already have a webpack configuration file for your application. You’ll need to tap into this later in the process.

There are a few development dependencies you’ll need to install:

You can install most of these all in one go:

$ npm install --save-dev karma karma-jasmine karma-chrome-launcher karma-webpack jasmine-core

karma-cli is installed separately because it gets installed globally:

$ npm install -g karma-cli

Now that all the packages are installed, generate a Karma configuration to start with:

$ karma init karma.conf.js

This will ask you a bunch of questions about your Karma test setup. Make sure you tell it you’re using Jasmine. When you’re done, you should have something like this:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'test/**/*Spec.js',
      'test/**/*Spec.jsx'
    ],
    reporters: ['mocha'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: true,
    concurrency: Infinity
  })
}

Now you just need to pull in your webpack configuration. At the top of the config file, require it in:

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

Next, add a webpack section to your Karma configuration:

    webpack: webpackConfig, 

This will expose your webpack configuration to Karma.

Finally, add a preprocessors section:

  preprocessors: {
    'test/**/*Spec.js': ['webpack'],
    'test/**/*Spec.jsx': ['webpack']
  },

This lets Karma know that before your tests are run, they need to be preprocessed by running them through webpack.

The final Karma configuration should look like this:

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

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'test/**/*Spec.js',
      'test/**/*Spec.jsx'
    ],
    preprocessors: {
      'test/**/*Spec.js': ['webpack'],
      'test/**/*Spec.jsx': ['webpack']
    },
    webpack: webpackConfig, 
    reporters: ['mocha'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: true,
    concurrency: Infinity
  })
}

The only thing that will differ in your Karma configuration is the reporter. I prefer karma-mocha-reporter, so that’s what I’m using in my configuration.

From here, you are good to go. Go forth and write your tests using JSX or ES2015. To run your tests, just start Karma from the command line:

$ karma start