Test-Driven React with Karma and Webpack

Over the past few months, I've been digging deeper into React and tools. I've come to really enjoy developing web components with React.

So far, I have not looked into the React Flux patten much and intend to do that soon. However, I wanted to go through a step-by-step guide to getting up and running with React.

In this series, I want to go a bit further than showing just how React props and events work. I'll introduce building modules that can be consumed with React using test-driven development, Webpack for React, and react-hot-loader to make browser development more seamless.

For this guide, I'm going to use Karma as the Jasmine test runner.  Also, I'm not going to use Bower for JavaScript package management at all.  I'll favour using npm as both package manager and task runner.

In this example, I'm going to build a small Conway's Game of Life.  It will be fairly simple, but complete.  You can see the completed repository on github (feel free to send pull requests!).

Getting the environment set up

I'm going to be working on a Ubuntu flavor Linux machine, but I'm fairly certain all of these commands will work the same on any platform.  I'm going to assume you have node and npm installed (I'm using node.js v0.10.36).

The directory structure is very simple:

root
├── src
│   ├── components
│   └── game
├── styles
└── tests
    └── game

The root directory will hold the index.html that we'll serve (as well as some config files).

Let's start to pull in some of the tools that we'll be using:

First, install Karma, Jasmine and PhantomJS from npm with:

$ npm install karma --save-dev 
$ npm install karma-jasmine karma-phantomjs-launcher --save-dev 

I also installed the karma-cli in order to make running Karma slightly easier:

$ npm install -g karma-cli

This should be enough to get started writing the game module.  In order to test that everything is set up correctly, let's run a few commands:

$ phantomjs --version
$ 1.9.0

$ karma --version
$ Karma version: 0.12.35

The last thing we have to do before writing some code is to configure Karma.  I used the command karma init command to generate a new config file.  Most of the questions should be straight forward.  Select jasmine as the testing framework and PhantomJS as the browser.  Finally, we need to add the /src and /tests directory to the files array so that Karma will track these files:

    // list of files / patterns to load in the browser
    files: [
      'src/**/*.js',
      'tests/**/*.js'
    ],

Some Test-Driving with Karma

We are now ready to add a test harness for the game module.  Add a new file named game-test.js to the /tests/game directory.

The first test that we'll write will be to create a 30 x 30 grid.  The grid will be represented as a simple array of arrays:

Now create a new file in /src/game named game.js where we can begin to implement the game. We can now create an empty Game module:

Run Karma to see a red test:

$ karma start

This should fail and give because the grid() function isn't defined yet.  Let's change that now:

Now when we re-run our tests with karma, it should run green.

In the next post, we'll finish the Game module and start to introduce React with Webpack.