The following blog post demonstrates how to setup Jest unit testing with node 0.10.x, react 0.13.x, jest-cli 0.4.x and babel-jest 5.x.x.

npm install jest-cli babel-jest --save-dev  

Create a directory called __tests__/ in the root of your project that will contain all of your test files.

Update test scripts property within your package.json.

{
 ...
 "scripts": {
   "test": "jest"
 }
 ...
}

Add and update the following config in your package.json. Due to the fact that Jest automatically mocks module dependencies, it may be necessary to explicitly prevent certain modules from being mocked. To do this, add their path to the unmockedModulePathPatterns array.

If you are writing your code in ES6/7/JSX you will also want Jest to compile it to ES5 before runnig any tests. To achieve this, make sure you have installed babel-jest and added its path to the scriptPreprocessor property.

{
  ...
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/lodash",
      "<rootDir>/node_modules/react"
    ]
  }
  ...
}

Optionally, update your linter config e.g. .eslintrc or .jshintrc with Jest global variables.

{
  ...
  "globals": {
    "expect": true,
    "require": true,
    "beforeEach": true,
    "afterEach": true,
    "describe": true,
    "it": true,
    "done": true,
    "jest": true,
    "pit": true,
    "xdescribe": true,
    "xit": true
  }
  ...
}

The example directory structure is as follows.

.
├── __tests__
│   └── components
│       └── head.react.test.js
├── node_modules
├── package.json
├── public
│   ├── app.js
│   ├── dist
│   │   └── bundle.js
│   └── js
│       ├── components
│       │   └── head.react.js
│       └── views
│           ├── home.js
│           └── layout.js
└── server.js

So let's write a test for the head.react.js React component located within the 'React Universal App Boilerplate' git repo.

/* public/js/components/head.react.js */
import React from 'react';

export default class extends React.Component {  
  constructor(props) {
    super(props);
    this.state = { showDiv: false };
  }

  _handleClick(e) {
    e.preventDefault();
    this.setState({ showDiv: true });
  }

  _renderDiv() {
    let text = '';

    if (this.state.showDiv) text = 'You clicked me!';

    return (
      <div className="my-div">{text}</div>
    );
  }

  render() {
      return (
        <div>
          <h1>Universal JavaScript Example</h1>
          <button onClick={this._handleClick.bind(this)}>Click</button>
          {this._renderDiv()}
          <hr />
        </div>
      );
  }
}

The code below shows a basic unit test that interacts with head.react.js component, checks that it contains a button and checks that some text is rendered once the button is clicked.

/* __tests__/components/head.react.test.js */
const componentPath = '../../public/js/components/head.react';

/* disable mocking of the component we are testing */
jest.dontMock(componentPath);

const React = require('react/addons');  
const Component = require(componentPath);  
const TestUtils = React.addons.TestUtils;  
const Simulate = TestUtils.Simulate;

/* helper functions */
const getComponent = (props = {}) => {  
  return TestUtils.renderIntoDocument(<Component {...props} />);
};

const getComponentWithClass = (...args) => {  
  return TestUtils.findRenderedDOMComponentWithClass.apply(null, args);
}

const getComponenstWithTag = (...args) => {  
  return TestUtils.scryRenderedDOMComponentsWithTag.apply(null, args);
}

describe('Head component', () => {  
  const instance = getComponent();
  const button = getComponenstWithTag(instance, 'button')[0];

  it('should render a button', () => {
    expect(button).not.toEqual(undefined);
  });

  it('should display text when button is clicked', () => {
    const getDivInnerText = () => {
      return getComponentWithClass(instance, 'my-div').props.children;
    };

    expect(getDivInnerText()).toEqual('');

    Simulate.click(React.findDOMNode(button));

    expect(getDivInnerText()).toEqual('You clicked me!');
  });
});

This trivial example can be expanded to test more complicated components using the rich api that Jest provides, in combination with React's Test Utilities, which allow you to simulate DOM events like onClick, onChange, onKeyDown etc,

Happy testing!