React-用Jest测试
2015-12-21 22:45
585 查看
一、
1.目录结构
二、代码
1.CheckboxWithLabel.jsx
2.__test__/checkboxwithlabel.js
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'); }); });
相关文章推荐
- React-Native 在window下开发andriod
- android studio 配置react环境
- ReactJs的一些记录
- Windows环境搭建React Native Android的开发环境
- React-Flux 介绍及实例演示
- React-用ImmutableJS提高性能
- React Jest测试
- React如何性能调优
- React 性能调优原理
- React使用rAF动画介绍
- React用JS 模拟动画介绍
- 如何在React中使用CSS3动画
- java识别验证码-用tess4j实现超简单调用tessreact-orc来破解验证码
- React表单组件自定义-可控及不可控组件
- 大神眼中的React Native--备用
- React事件处理函数的bind复用和name复用
- React表单元素的使用
- ReactJS学习笔记(三)
- 用ReactJS和Python的Flask框架编写留言板的代码示例
- 用ReactJS和Python的Flask框架编写留言板的代码示例