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

一、模拟组件

1.用到的工具

(1)browerify

(2)jasmine-react-helpers

(3)rewireify（依赖注入）

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

2.代码

(1)test1.jsx

 1 var React = require("react/addons");
 2 var TestUtils = React.addons.TestUtils;
 3 var jasmineReact = require("jasmine-react-helpers");
 4 var Survey = require("./Survey.jsx");
 5 
 6 var mockCheckboxWithLabel = React.createClass({
 7     render: function(){
 8         return <p>替换的节点</p>
 9     }
10 })
11 
12 describe("test Survey component", function () {
13     it("mock CheckboxWithLabel component", function () {
14         Survey.__set__("CheckboxWithLabel", mockCheckboxWithLabel);
15         var survey = TestUtils.renderIntoDocument(<Survey></Survey>);
16         expect(React.findDOMNode(survey).textContent).toContain("替换的");
17     })
18 })

(2)app.jsx

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

(3)Survey.jsx

 1 var React = require('react/addons');
 2 var CheckboxWithLabel = require('./CheckboxWithLabel.jsx');
 3 var Survey = React.createClass({
 4     getInitialState: function () {
 5         return {
 6             status: [false, false],
 7             items: [{
 8                 text: "你喜欢吃苹果吗",
 9                 on: "喜欢",
10                 off: "不喜欢"
11             }, {
12                 text: "你喜欢吃香蕉吗",
13                 on: "喜欢",
14                 off: "不喜欢"
15             }
16             ]
17         }
18     },
19     onChange: function(i) {
20         var status = this.state.status.concat([]);
21         status[i] = !status[i];
22         this.setState({
23             status: status
24         });
25     },
26     randomNumber: function () {
27         return Math.random();
28     },
29     render: function() {
30         var labels = [];
31         var that = this;
32         this.state.items.map(function (item, i) {
33             labels.push(<CheckboxWithLabel checked={that.state.status[i]} index={i} text={item.text} on={item.on} off={item.off} onChange={that.onChange}></CheckboxWithLabel>)
34         })
35         return (
36             <div>
37             {this.randomNumber()}
38             <br/>
39             {labels}
40             </div>
41         );
42     }
43 });
44 
45 module.exports = Survey;

(4)CheckboxWithLabel.jsx

 1 var React = require('react/addons');
 2 var CheckboxWithLabel = React.createClass({
 3     onChange: function() {
 4         this.props.onChange(this.props.index);
 5     },
 6     render: function() {
 7         return (
 8             <label>
 9                 {this.props.text}
10                 <input type = "checkbox" checked={this.props.checked} onChange={this.onChange}/> 
11                 {this.props.checked ? this.props.on : this.props.off} 
12             </label>);
13     }
14 });
15 
16 module.exports = CheckboxWithLabel;

(5)index.html

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>测试</title>
 6 </head>
 7 <body>
 8     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.min.css">
 9     <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.min.js"></script>
10     <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine-html.min.js"></script>
11     <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/boot.min.js"></script>
12     <script src="./app.js"></script>
13 </body>
14 </html>

3.运行结果

二、模拟函数

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

2.代码

 1 var React = require("react/addons");
 2 var TestUtils = React.addons.TestUtils;
 3 var jasmineReact = require("jasmine-react-helpers");
 4 var Survey = require("./Survey.jsx");
 5 
 6 describe("test Survey component", function () {
 7     it("mock CheckboxWithLabel component", function () {
 8         jasmineReact.spyOnClass(Survey, "randomNumber").and.returnValue(168);
 9         var survey = TestUtils.renderIntoDocument(<Survey></Survey>);
10         expect(React.findDOMNode(survey).textContent).toContain("168");
11     })
12 })

三、模拟事件

 1 var React = require("react/addons");
 2 var TestUtils = React.addons.TestUtils;
 3 var jasmineReact = require("jasmine-react-helpers");
 4 var Survey = require("./Survey.jsx");
 5 
 6 describe("test Survey component", function () {
 7     it("mock CheckboxWithLabel component", function () {
 8         var survey = TestUtils.renderIntoDocument(<Survey></Survey>);
 9         var target = TestUtils.scryRenderedDOMComponentsWithTag(survey, "input");
10         TestUtils.Simulate.change(target[0]);
11         TestUtils.Simulate.change(target[1]);
12         expect(React.findDOMNode(survey).textContent).toContain("不");
13     })
14 })