Instantly share code, notes, and snippets.

Embed
What would you like to do?
React + airbnb
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"
+ ]
}
}
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
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>');
});
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment