用React.addons.TestUtils、Jasmine进行单元测试
一、用到的工具
1.React.addons.TestUtils
2.Jasmine
3.Browserify(处理jsx文件的require依赖关系)
4.Reactify(能和browserify很好的配合，把jsx转换为js)
5.编译命令为 browserify -t reactify test.jsx > app.js （参数t为transform）
二、测试代码：
1.test.jsx
var React = require("react/addons");
var TestUtils = React.addons.TestUtils;
var CheckboxWithLabel = require("./CheckboxWithLabel.jsx");
describe("test CheckboxWithLabel component", function () {
it("check label text", function () {
var checkbox = TestUtils.renderIntoDocument(<CheckboxWithLabel text="你是否爱吃橘子" on="爱吃" off="不爱吃"></CheckboxWithLabel>);
var text = React.findDOMNode(checkbox).textContent;
expect(text).toContain("你是否爱吃橘子1");
})
})
2.CheckboxWithLabel.jsx
var React = require('react/addons');
var CheckboxWithLabel = React.createClass({
getInitialState: function () {
return {
checked: false
}
},
onChange: function() {
this.setState({
checked: !!this.state.checked
});
},
render: function() {
return (
<label>
{this.props.text}
<input type = "checkbox" checked={this.state.checked} onChange={this.onChange}/>
{this.checked ? this.props.on : this.props.off}
</label>);
}
});
module.exports = CheckboxWithLabel;
3.index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<link rel="stylesheet" href="./node_modules/jasmine.css">
<script src="./node_modules/jasmine.js"></script>
<script src="./node_modules/jasmine-html.js"></script>
<script src="./node_modules/boot.js"></script>
<script src="./app.js"></script>
</body>
</html>
三、运行结果
1.
2.若修改测试代码为expect(text).toContain("你是否爱吃橘子1")，则如下：
用React.addons.TestUtils、Jasmine进行单元测试的更多相关文章
- Karma：1. 集成 Karma 和 Jasmine 进行单元测试
关于 Karma 会是一个系列,讨论在各种环境下,使用 Karma 进行单元测试. 本文讨论 karma 集成 Jasmine 进行单元测试. 初始化 NPM 实现初始化 NPM 包管理,创建 pac ...
- Karma和Jasmine自动化单元测试
从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...
- Karma和Jasmine 自动化单元测试环境搭建
最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 ...
- Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试
1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...
- Angularjs 基于karma和jasmine的单元测试
目录: 1. 单元测试的配置 2. 实例文件目录解释 3. 测试controller 3.1 测试controller中变量值是否正确 3.2 模拟http请求返回值,测试$http服 ...
- 使用karma+jasmine做单元测试
目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner. ...
- React组件测试(模拟组件、函数和事件)
一.模拟组件 1.用到的工具 (1)browerify (2)jasmine-react-helpers (3)rewireify(依赖注入) (4)命令:browserify - t reactif ...
- React Jest测试
一. var jest = require('jest'); jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel ...
- React开发项目例子
一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2. ...
随机推荐
- struts2结构图
- 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏
function orient() {if (window.orientation == 90 || window.orientation == -90) {//ipad.iphone竖屏:Andri ...
- 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础
第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1 初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...
- JMS消息头
一个消息对象分为三部分:消息头(Headers),属性(Properties)和消息体(Payload).对于StreamMessage和MapMessage,消息本身就有特定的结构,而对于TextM ...
- C# 反射学习总结
C#中的反射可以使得程序集和类型(类.结构.委托.接口和枚举)以及类型中的成员(方法.字段.属性.事件.参数.构造函数等)都成为变量在编程中动态调用.
- Error NO.2013 Lost connection to Mysql server during query
系统:[root@hank-yoon ~]# cat /etc/redhat-release CentOS release 6.3 (Final) DB版本:mysql> select @@ve ...
- Fat-tree 胖树交换网络
胖树架构下,网络带宽不收敛 传统的树形网络拓扑中,带宽是逐层收敛的,树根处的网络带宽要远小于各个叶子处所有带宽的总和. 而胖树网络则更像是真实的树,越到树根,枝干越粗,即:从叶子到树根,网络带宽不收敛 ...
- 【quartz】 理论知识
属性的介绍 1.调度器属性:分别设置调度器的实例名(instanceName) 和实例 ID (instanceId).属性 org.quartz.scheduler.instanceName 可以是 ...
- ProgressDialog弹出时的底色变暗（转）
背景:在做一个进度条时,不想让它的背景变暗,以免影响其他区域的正常显示. 在网上搜索时,看到的方法多数是: 方法一 :在代码中 可以这么设置 Window mWindow = getWindow(); ...
- JavaScript string array 数组
Array类可以如下定义: var aValues = new Array(); 如果预先知道数组的长度,可以用参数传递长度 var aValues = new Array(20); -------- ...