用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. ...
随机推荐
- Messages.pas里的消息
一.Windows 消息大全 这张表拷贝自万一兄的帖子:http://www.cnblogs.com/del/archive/2008/02/25/1079970.html 但是我希望自己能把这些消息 ...
- line-height属性使文字垂直居中原理
原理:line-height与font-size的计算之差(在CSS中成为“行间距”)分为两半,分别加到一个文本内容的顶部和底部,这样就使得文字垂直居中了.
- Python计算斗牛游戏的概率
Python计算斗牛游戏的概率 过年回家,都会约上亲朋好友聚聚会,会上经常会打麻将,斗地主,斗牛.在这些游戏中,斗牛是最受欢迎的,因为可以很多人一起玩,而且没有技术含量,都是看运气(专业术语是概率). ...
- c 指针兼容性问题
指针兼容性问题: const指针不能赋值给非const指针． 非const指针可以赋值给const 指针,但前提是只是一层间接运算 Example: int *pt1; const *pt2; con ...
- RDD的转换操作---RDD转换过程
1) union(otherRDD)RDD-->UnionRDD2) groupByKey(numPartitions)RDD-->ShuffledRDD-->MapPartitio ...
- ThinkPHP中initialize和construct调用父类的区别
http://blog.topok.net/archives/142 需要加parent::_initialize();
- PHP获取mysql数据表的字段名称和详细信息的方法
首先我们需要了解下查询MySQL数据库/表相关信息的SQL语句: 代码如下: SHOW DATABASES //列出 MySQL Serv ...
- 微软职位内部推荐-SDE2 (Windows driver)
微软近期Open的职位: SDE2 (Windows driver) Job title: Software Development Engineer 2 Location: Shanghai, Ch ...
- iOS 下拉菜单 FFDropDownMenu自定义下拉菜单样式实战-b
Demo地址:https://github.com/chenfanfang/CollectionsOfExampleFFDropDownMenu框架地址:https://github.com/chen ...
- SiteMesh3 介绍和使用
Sitemesh是由一个基于Web页面布局.装饰及与现存Web应用整合的框架.它能帮助我们再由大量页面工程的项目中创建一致的页面布局和外观,如一 致的导航条.一致的banner.一致的版权等. ...