React-用Jest测试

一、

1.目录结构

二、代码

1.CheckboxWithLabel.jsx

 1 var React = require('react/addons');
 2 var CheckboxWithLabel = React.createClass({
 3     getInitialState: function() {
 4         return {
 5             isChecked: false
 6         };
 7     },
 8     onChange: function() {
 9         this.setState({
10             isChecked: !this.state.isChecked
11         });
12     },
13     render: function() {
14         return ( < label > < input type = "checkbox"
15             checked = {
16                 this.state.isChecked
17             }
18             onChange = {
19                 this.onChange
20             }
21             /> {this.state.isChecked ? this.props.labelOn : this.props.labelOff} </label > );
22     }
23 });
24 
25 module.exports = CheckboxWithLabel;

2.__test__/checkboxwithlabel.js

 1 var jest = require('jest');
 2 
 3 jest.dontMock('../CheckboxWithLabel.js');
 4 describe('CheckboxWithLabel', function() {
 5     it('changes the text after click', function() {
 6         var React = require('react/addons');
 7         var CheckboxWithLabel = require('../CheckboxWithLabel.js');
 8         var TestUtils = React.addons.TestUtils;
 9         var checkbox = TestUtils.renderIntoDocument( < CheckboxWithLabel labelOn = "On"
10             labelOff = "Off" / > );
11         var label = TestUtils.findRenderedDOMComponentWithTag(checkbox, 'label');
12         expect(label.getDOMNode().textContent).toEqual('Off');
13         var input = TestUtils.findRenderedDOMComponentWithTag(checkbox, 'input');
14         TestUtils.Simulate.change(input);
15         expect(label.getDOMNode().textContent).toEqual('On');
16     });
17 });