React + airbnb

01_package.json.diff

diff --git a/package.json b/package.json
index 6bdb1e4..a22416b 100644
--- a/package.json
+++ b/package.json
@@ -22,18 +22,24 @@
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-2": "^6.16.0",
+    "babel-register": "^6.16.3",
+    "chai": "^3.5.0",
     "css-loader": "^0.25.0",
+    "enzyme": "^2.5.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "glob": "^7.1.0",
     "gulp": "^3.9.1",
     "gulp-sass": "^2.3.2",
+    "mocha": "^3.1.2",
+    "react-addons-test-utils": "^15.3.2",
     "sass-loader": "^4.0.2",
+    "sinon": "^1.17.6",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.16.1"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "mocha test/**/*.js --compilers js:babel-register",
     "start": "node server.js",
     "start-mock-server": "webpack-dev-server",
     "webpack": "webpack",
@@ -58,5 +64,12 @@
   "homepage": "https://github.com/reactjs/react-tutorial",
   "engines": {
     "node": "6.2.0"
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "react",
+      "stage-2"
+    ]
   }
 }

Hello.jsx

import React from 'react';

class Hello extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      value: "a"
    };
  }

  handleClick = () => {
    this.setState({
      label: this.state.value.toUpperCase()
    });
  }

  handleChange = (e) => {
    this.setState({value: e.target.value});
  }

  render() {
    return (
      <div>
        <input type="text" name="name" value={this.state.value}  onChange={this.handleChange}/>
        <button type="button" onClick={this.handleClick}>送信</button>
        <span>{this.state.label}</span>
      </div>
    );
  }
}

export default Hello

HelloTest.js

import React from 'react';
import ReactDOM from 'react-dom';
import {expect} from 'chai';
import {shallow, mount} from 'enzyme';

import Hello from '../public/scripts/Hello';

describe('<Hello/>', () => {
  it('render', () => {
    const wrapper = shallow(<Hello />);
    expect(wrapper.contains(<span></span>)).to.be.true
  });

  it('simulates click event', () => {
    const wrapper = shallow(<Hello/>)
    wrapper.find('button').simulate('click');
    expect(wrapper.find('span').text()).to.equal('A');
    expect(wrapper.find('span').html()).to.equal('<span>A</span>');
  });

  it('simulates input and click event', () => {
    const wrapper = shallow(<Hello/>)
    wrapper.find('input').simulate('change', {target: {value: 'ba'}});
    wrapper.find('button').simulate('click');
    expect(wrapper.find('span').text()).to.equal('BA');
    expect(wrapper.find('span').html()).to.equal('<span>BA</span>');
  });
})