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.运行结果
二、模拟函数
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("不");
})
})
React组件测试(模拟组件、函数和事件)的更多相关文章
- 【React】学习笔记（一）——React入门、面向组件编程、函数柯里化
课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...
- React 父组件触发子组件事件
Parent组件 import React from "react"; import Child from "./component/Child"; class ...
- React Hook父组件获取子组件的数据/函数
我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...
- react hooks 如何自定义组件（react函数组件的封装）
前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...
- jquery技巧之让任何组件都支持类似DOM的事件管理
本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
- react基本语法及组件
一.react简介 1.起源:React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. 2.特点: 1.声明式设计 −React采用声明 ...
- 【React -- 5/100】 组件复用
组件复用 React组件复用概述 思考:如果两个组件中的部分功能相似或相同,该如何处理? 处理方式:复用相似的功能 复用什么? state 操作state的方法 两种方式: render props模 ...
- react实战系列 —— react 的第一个组件
react 的第一个组件 写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生. 本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底 ...
随机推荐
- rsync参数详解、利用ssh、rsync 实现数据的定时同步
rsync 简介 rsync(remote synchronize)是一个远程数据同步工具,可通过 LAN/WAN 快速同步多台主机之间的文 件.也可以使用 rsync 同步本
- highchars
var drawChart = function(sourceUrl) { $.ajax({ "type" : "post", "url" ...
- openerp 经典收藏 通过view实现字段的只读、隐藏操作（转载）
通过view实现字段的只读.隐藏操作 原文地址:http://cn.openerp.cn/view_groups/ 在OpenERP V7视图(ir.ui.view)多了一个非常有用的字段(group ...
- SQL拼接备份数据库
在SQLserver使用脚本备份数据库的时候需要注意的问题是: 1.指向的文件名必须是有读写权限. 2.在使用批量数据库备份时候需要根据自己需求选择性备份. -- ================== ...
- oracle11g RAC添加节点
OS: [root@rac ~]# more /etc/oracle-releaseOracle Linux Server release 5.7 DB: SQL> SELECT * FROM ...
- Java加解密与数字签名
** Java加解密 ** 实现方式:JDK实现,CC,BC JDK提供比较基础的底层的实现:CC提供一些简化的操作:BC提供补充 一.Base64加密 非常简单,加密解密就一个函数. 代码如下: 二 ...
- 在Windows下忘记MySQL最高用户权限密码的解决方案
1.打开MySQL配置文件 my.ini中,添加上skip-grant-tables,可以添加到文件的末尾或者是这添加到[mysqld]的下面(直接添加在my.ini文件最后亲测可以,但是在[mysq ...
- cocos2dx中的动作
CCAction是cocos2dx中专门用来处理动作相关的类,几乎所有的与动作相关的类都是从它派生而来的.而CCAction继承自CCObject class CCFiniteTimeAction : ...
- iOS VideoToolbox硬编H.265（HEVC）H.264（AVC）：1 概述
本文档尝试用Video Toolbox进行H.265(HEVC)硬件编码,视频源为iPhone后置摄像头.去年做完硬解H.264,没做编码,技能上感觉有些缺失.正好刚才发现CMFormatDescri ...
- 中国IT人，你们是否从没想过开发一款伟大的产品？
我也是今年刚毕业的,一毕业就做了猎头,从开始实习到正式工作,迄今为止接触的IT技术人不下上千人了.这里面有腾讯.阿里巴巴.百度.360.金山.金蝶.用友.华为.惠普等从事自主研发的大牛,也有很多软通. ...