React组件测试(模拟组件、函数和事件)

一、模拟组件

1.用到的工具

(1)browerify

(2)jasmine-react-helpers

(3)rewireify(依赖注入)

(4)命令:browserify - t reactify -t rewireify test1.jsx > app.js

2.代码

(1)test1.jsx

 var React = require("react/addons");
var TestUtils = React.addons.TestUtils;
var jasmineReact = require("jasmine-react-helpers");
var Survey = require("./Survey.jsx"); var mockCheckboxWithLabel = React.createClass({
render: function(){
return <p>替换的节点</p>
}
}) describe("test Survey component", function () {
it("mock CheckboxWithLabel component", function () {
Survey.__set__("CheckboxWithLabel", mockCheckboxWithLabel);
var survey = TestUtils.renderIntoDocument(<Survey></Survey>);
expect(React.findDOMNode(survey).textContent).toContain("替换的");
})
})

(2)app.jsx

 var Survey = require('./Survey.jsx');
var React = require('react/addons'); React.render(<Survey></Survey>, document.body);

(3)Survey.jsx

 var React = require('react/addons');
var CheckboxWithLabel = require('./CheckboxWithLabel.jsx');
var Survey = React.createClass({
getInitialState: function () {
return {
status: [false, false],
items: [{
text: "你喜欢吃苹果吗",
on: "喜欢",
off: "不喜欢"
}, {
text: "你喜欢吃香蕉吗",
on: "喜欢",
off: "不喜欢"
}
]
}
},
onChange: function(i) {
var status = this.state.status.concat([]);
status[i] = !status[i];
this.setState({
status: status
});
},
randomNumber: function () {
return Math.random();
},
render: function() {
var labels = [];
var that = this;
this.state.items.map(function (item, i) {
labels.push(<CheckboxWithLabel checked={that.state.status[i]} index={i} text={item.text} on={item.on} off={item.off} onChange={that.onChange}></CheckboxWithLabel>)
})
return (
<div>
{this.randomNumber()}
<br/>
{labels}
</div>
);
}
}); module.exports = Survey;

(4)CheckboxWithLabel.jsx

 var React = require('react/addons');
var CheckboxWithLabel = React.createClass({
onChange: function() {
this.props.onChange(this.props.index);
},
render: function() {
return (
<label>
{this.props.text}
<input type = "checkbox" checked={this.props.checked} onChange={this.onChange}/>
{this.props.checked ? this.props.on : this.props.off}
</label>);
}
}); module.exports = CheckboxWithLabel;

(5)index.html

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/boot.min.js"></script>
<script src="./app.js"></script>
</body>
</html>

3.运行结果

React组件测试(模拟组件、函数和事件)

二、模拟函数

1.模拟函数通常用来消除函数的随机性,故在Survey.jsx中添加randomNumber函数,然后在测试中替换成返回固定值,若测试结果为每次都返回我们设定的值,则表示替换函数成功

2.代码

 var React = require("react/addons");
var TestUtils = React.addons.TestUtils;
var jasmineReact = require("jasmine-react-helpers");
var Survey = require("./Survey.jsx"); describe("test Survey component", function () {
it("mock CheckboxWithLabel component", function () {
jasmineReact.spyOnClass(Survey, "randomNumber").and.returnValue(168);
var survey = TestUtils.renderIntoDocument(<Survey></Survey>);
expect(React.findDOMNode(survey).textContent).toContain("168");
})
})

三、模拟事件

1.

 var React = require("react/addons");
var TestUtils = React.addons.TestUtils;
var jasmineReact = require("jasmine-react-helpers");
var Survey = require("./Survey.jsx"); describe("test Survey component", function () {
it("mock CheckboxWithLabel component", function () {
var survey = TestUtils.renderIntoDocument(<Survey></Survey>);
var target = TestUtils.scryRenderedDOMComponentsWithTag(survey, "input");
TestUtils.Simulate.change(target[0]);
TestUtils.Simulate.change(target[1]);
expect(React.findDOMNode(survey).textContent).toContain("不");
})
})
上一篇:asp.net core 系列 7 Razor框架路由(上)


下一篇:您真的理解了SQLSERVER的日志链了吗?