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');

     });

 });