basic react component

.babelrc

{
  "presets": [
    "es2015",
    "stage-2",
    "react"
  ]
}

index.js

import React from 'react';

export const MyComponent = ({color}) => {
  return (
    <div className={`box color-${color}`}></div>
  );
};

mocha.opts

--compilers js:babel-register
test.js

package.json

{
  "name": "react-component",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha --opts mocha.opts",
    "test:watch": "mocha --opts mocha.opts --watch --reporter min"
  },
  "author": "Justin Obney",
  "license": "MIT",
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-2": "^6.3.13",
    "babel-register": "^6.3.13",
    "expect": "^1.13.4",
    "expect-jsx": "^2.2.1",
    "react-addons-test-utils": "^0.14.5"
  },
  "dependencies": {
    "react": "^0.14.5",
    "react-dom": "^0.14.5"
  }
}

test.js

import React from 'react';
import {createRenderer} from 'react-addons-test-utils';
import expect from 'expect';
import expectJSX from 'expect-jsx';
expect.extend(expectJSX);

import { MyComponent } from './index.js';

class TestComponent extends React.Component {}

const render = (component) => {
  const renderer = createRenderer();
  renderer.render(component);
  return renderer.getRenderOutput();
}

describe('expect-jsx', () => {
  it('works', () => {
    const actualElement = render(<MyComponent color="red" />);
    const expectedElement = <div className="box color-red"></div>;
    expect(actualElement).toEqualJSX(expectedElement);
  });
});