React-用Jest测试

一、

1.目录结构

二、代码

1.CheckboxWithLabel.jsx

 var React = require('react/addons');
 var CheckboxWithLabel = React.createClass({
     getInitialState: function() {
         return {
             isChecked: false
         };
     },
     onChange: function() {
         this.setState({
             isChecked: !this.state.isChecked
         });
     },
     render: function() {
         return ( < label > < input type = "checkbox"
             checked = {
                 this.state.isChecked
             }
             onChange = {
                 this.onChange
             }
             /> {this.state.isChecked ? this.props.labelOn : this.props.labelOff} </label > );
     }
 });

 module.exports = CheckboxWithLabel;

2.__test__/checkboxwithlabel.js

 var jest = require('jest');

 jest.dontMock('../CheckboxWithLabel.js');
 describe('CheckboxWithLabel', function() {
     it('changes the text after click', function() {
         var React = require('react/addons');
         var CheckboxWithLabel = require('../CheckboxWithLabel.js');
         var TestUtils = React.addons.TestUtils;
         var checkbox = TestUtils.renderIntoDocument( < CheckboxWithLabel labelOn = "On"
             labelOff = "Off" / > );
         var label = TestUtils.findRenderedDOMComponentWithTag(checkbox, 'label');
         expect(label.getDOMNode().textContent).toEqual('Off');
         var input = TestUtils.findRenderedDOMComponentWithTag(checkbox, 'input');
         TestUtils.Simulate.change(input);
         expect(label.getDOMNode().textContent).toEqual('On');
     });
 });