用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. ...
随机推荐
- 每日一“酷”之Cookie
Cookie---Http Cookie 作用:Cookie模块定义一些类来解析和创建HTTP cookie首部 Cookie模块为大多数符合RFC 2109的cookie实现一个解析器.这个实现没有 ...
- C# 发邮件类可发送附件
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Ne ...
- gdb调试大全
原文:http://blog.csdn.net/dadalan/article/details/3758025
- AJAX请求遭遇未登录和Session失效的解决方案
使用技术:HTML + Servlet + Filter + jQuery 一般来说我们的项目都有登录过滤器,一般请求足以搞定.但是AJAX却是例外的,所以解决方法是设置响应为session失效. 一 ...
- 【原创】jQuery插件 - Booklet翻书特效教程（一） 一般设置
jQuery插件 - Booklet翻书特效教程(一) 一般设置 本文由五月雨恋提供,转载请注明出处. 一.宽高(width/height) 1.自定义大小 $(function(){ // 自定义页 ...
- JPA学习---第一节：JPA详解
一.详解 JPA JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关系映射工具来管理Java应用中的关系数据.他的出现主要是 ...
- DB天气app冲刺二阶段第四天
今天就进度来说没有丝毫进度..考虑直接把数据库文件弄到代码里.因为每次挑选城市的时候都有时会出bug ,所以我想明天试一下看看是不是这个的问题,虽然工程量有点大,但是应该不困难,所以明天试一下需要. ...
- Perceptron Learning Algorithm (PLA)
Perceptron - 感知机,是一种二元线性分类器,它通过对特征向量的加权求和,并把这个”和”与事先设定的门槛值(threshold)做比较,高于门槛值的输出1,低于门槛值的输出-1.其中sign ...
- 华为章宇：如何学习开源项目及Ceph的浅析
转自http://www.csdn.net/article/2014-04-10/2819247-how-to-learn-opensouce-project-&-ceph 摘要:开源技术的学 ...
- .NET核心代码保护策略-隐藏核心程序集
经过之前那个道德指责风波过后也有一段时间没写博客了,当然不是我心怀内疚才这么久不写,纯粹是程序员的通病..怎一个懒字了得,本来想写一些长篇大论反讽一下那些道德高人的.想想还是算了,那样估计会引来新一波 ...