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)或可能隐藏底 ...
随机推荐
- 解决前端浏览器传JSON对像到服务端后全部变成string类型的方法
这几天公司用nodejs+mongodb来做些东西,UI用的是kendo UI 碰到一个问题: 举个例子var a={"name":"张三","age ...
- 测试使用Windows Live Writer
目前是在win7系统下面使用的,曾经在winxp下去配置,却失败了,难道不支持xp? Windows Live Writer好像不支持代码关键字高亮显示啊. int main(void) { prin ...
- 基于Python的密码生成程序的优化
近期刚刚组织完内部的Python基础培训.GUI的开发培训,之后布置的作业是两人一组,利用前面所写的一些模块做一些小软件. 具体就是模拟Advanced Password Generator这个软件的 ...
- 屌丝IT男
偶尔翻到豆瓣里一篇对中国屌丝的批评,突然想到当年美国那个垮掉的一代,吸毒,淫乱,绝望的生存,而如今我们苦逼的80后自诩为屌丝的时候,也不想想每一个堕落的时代还是有牛逼的人存在,中国的大学,绝大部分在逃 ...
- 微信wap开发，页面显示元素不全-微信开发（asp.net）
最近在开发的微信的微商城,出现这样一种情况: pc上浏览正常,但是一到手机上浏览就会缺少部分元素 解决办法: 找了很多原因,还通过uc浏览器把网页到存下来了,发现并没有缺少元素,只是没有显示出来,后来 ...
- java集合类（二）List学习
接上篇 java集合类(一) List接口继承了Collection接口和Iterable接口,即同样含有Collection和 Iterable的特性,还有方法,其基本方法有: 1)有关添加: b ...
- FineUI Grid控件右键菜单的实现
FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对 ...
- HDU 5486 Difference of Clustering 图论
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5486 题意: 给你每个元素一开始所属的集合和最后所属的集合,问有多少次集合的分离操作,并操作和不变操 ...
- 【POJ】【3710】Christmas Game
博弈论 贾志豪论文上的题目……题解请看论文 Orz了一下Hzwer Source Code Problem: User: sdfzyhy Memory: 716K Time: 0MS Language ...
- 从String类看写C++ class需要注意的地方
#include <iostream> #include <string.h> using namespace std; class String { char* m_data ...