一、模拟组件
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.
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 })