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