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)或可能隐藏底 ...
随机推荐
- js根据IP取得天气
<span id="weather"></span> <script> function weather(cityName) { var cha ...
- Boa练习程序2
做一个地址簿的gui. #Boa:Frame:AddressEntry import wx def create(parent): return AddressEntry(parent) [wxID_ ...
- Java加解密与数字签名
** Java加解密 ** 实现方式:JDK实现,CC,BC JDK提供比较基础的底层的实现:CC提供一些简化的操作:BC提供补充 一.Base64加密 非常简单,加密解密就一个函数. 代码如下: 二 ...
- thinkphp对数据库操作有哪些内置函数
getModelName() 获取当前Model的名称 getTableName() 获取当前Model的数据表名称 switchModel(type,vars=array()) 动态切换模型 tab ...
- (转)assert()函数用法总结
assert宏的原型定义在<assert.h>中,其作用是如果它的条件返回错误,则终止程序执行,原型定义: #include <assert.h>void assert( in ...
- CentOS 6.5系统上安装MySQL数据库
1.查看系统是否安装了MySQL 使用命令: #rpm -qa | grep mysql 2.卸载已安装的MySQL 卸载mysql命令如下: #rpm ...
- Careercup - Facebook面试题 - 5435439490007040
2014-05-02 07:37 题目链接 原题: // merge sorted arrays 'a' and 'b', each with 'length' elements, // in-pla ...
- ADO.NET- 基础总结及实例介绍
最近闲暇时间写的一些小程序中,访问数据库比较多:下面主要介绍下ADO.NET方面知识,有不足之处,希望大神们不吝赐教: 提到ADO.NET,经常会和ASP.NET进行混淆,两者的区别很大,没有可比性, ...
- android编程常见问题-程序真机中不显示
新手编程常见问题: 问题表现:连接上手机后,程序不显示 解决版本:检查AndroidManifest.xml 文件中SDK版本的设置(要求要兼容当前手机版本系统),如下:
- SQL SERVER时间函数
本篇文章还是学习<程序员的SQL金典>内容的记录,此次将讲解的是SQL SERVER的时间函数. 本文只讲SQL SERVER支持的时间函数(其它数据库这里就不罗列了,想看更多的可以关注& ...