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)或可能隐藏底 ...
随机推荐
- 关于CSS中的PX值（像素）
场景: 人物:前端实习生「阿树」与 切图工程师「玉凤」事件:设计师出设计稿,前端实现页面 玉凤:树,设计稿发给你啦,差那么点像素,就叼死你┏( ￣へ￣)=☞阿树:~(>_<)~毛问题噶啦~ ...
- printf的格式控制的完整格式
printf的格式控制的完整格式:% - 0 m.n l或h 格式字符下面对组成格式说明的各项加以说明:①%:表示格式说明的起始符号,不可缺少.②-:有-表示左对齐输出,如省略表示右对齐输出 ...
- uWSGI uwsgi_response_write_body_do(): Connection reset by peer 报错的解决方法
服务器架构是:Nginx+uWSGI+Django 某一天,发现服务器返回的response不完整,例如文档大小是200K的,但是只返回了100K给浏览器. 查了一下uWSGI的日志,发现以下错误: ...
- virtualbox centos安装增强工具
系统的,VBoxLinuxAdditions-amd64.run 是用于64位系统的.执行以下命令来安装sh ./VBoxLinuxAdditions-x86.run 5.安装成功后重启系统.
- oracle 存储过程编辑 卡死
一.可用SYS登录, 二.查锁session_ID查找存储过程OPERATIONDATA_IMP被哪些session锁住而无法编译select * FROM dba_ddl_locks where n ...
- yii2.0 控制器加载不同的user组件
Yii::$app->user->id Yii::$app->user2->id Yii::$app->admin->id identityC ...
- (转) linux目录结构详细介绍
转自:http://yangrong.blog.51cto.com/6945369/1288072 目录 1.树状目录结构图 2./目录 3./etc/目录 4./usr/目录 5./var/目录 6 ...
- 在Visual Studio 2010 中创建类库(dll)
创建类库 选择"文件"->新建->项目->Visual C# ->类库,输入名称,选择位置,单击确定 浏览解决方案资源管理器,可以看到两个C#类,第一个是A ...
- http 4中 cache 头
// head['Cache-Control']='max-age=31536000'; // head['Expires']=new Date((new Date().getTime()+99999 ...
- Cocos2D创建项目
创建项目 配置好开发环境后, 用CMD切换到~\cocos2d\cocos2d-x-2.2.2\tools\project-creator目录上执行以下脚本 python create_project ...