一、用到的工具

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进行单元测试的更多相关文章

  1. Karma：1. 集成 Karma 和 Jasmine 进行单元测试

    关于 Karma 会是一个系列,讨论在各种环境下,使用 Karma 进行单元测试. 本文讨论 karma 集成 Jasmine 进行单元测试. 初始化 NPM 实现初始化 NPM 包管理,创建 pac ...

  2. Karma和Jasmine自动化单元测试

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  3. Karma和Jasmine 自动化单元测试环境搭建

    最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 ...

  4. Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试

    1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...

  5. Angularjs 基于karma和jasmine的单元测试

    目录: 1. 单元测试的配置 2. 实例文件目录解释 3. 测试controller     3.1 测试controller中变量值是否正确     3.2 模拟http请求返回值,测试$http服 ...

  6. 使用karma+jasmine做单元测试

    目的 使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner. ...

  7. React组件测试(模拟组件、函数和事件)

    一.模拟组件 1.用到的工具 (1)browerify (2)jasmine-react-helpers (3)rewireify(依赖注入) (4)命令:browserify - t reactif ...

  8. React Jest测试

    一. var jest = require('jest'); jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel ...

  9. React开发项目例子

    一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2. ...

随机推荐

  1. js禁止页面复制 禁用页面右键菜单的代码

    js实现禁止页面复制功能.禁用页面右键菜单等功能.  <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制 ...

  2. php读取图片内容并输出到浏览器的实现代码

    如果php以图片,zip,exe等文件输出到浏览器,而前面还输出了其他字符,就会有乱码. 代码很简单,网上都能找到,但在我机子上就是显示不出来,显示出的一直是这个php文件路径,费了点时间才搞定,原来 ...

  3. Js 和 PHP 中保留小数点后X位数的方法 toFixed、round、number_format、sprintf

    在 Javacript 中保留小数点后两位数的方法为 toFixed(2),其中的2为保留两位,写多少就保留多少了,满5进1. Javacript例子: var num = 24.54789523; ...

  4. Sandcastle是什么

    如果你的项目是.net开发,同时需要生成HTML的方法成员文档时,哪么就不得不拿出Sandcastle 因为Sandcastle是微软开发,并开源的文档生成工具; 这种生成进度等待的感觉很爽! 在这里 ...

  5. java之classpath到底是什么

    如果你输入一个命令,比如java那么系统是如何找到这个命令的呢?按照顺序,系统先在当前目录搜索是否有java.exe, java.bat 等. 如果没有,就得到系统的PATH(不区分大小写)里面查找. ...

  6. Java方法重载

    Java允许一个类中定义多个方法,只要参数列表不同就行了.如果同一个类中包含了两个或者两个以上的方法的方法名相同,但形参列表不同,则被称为方法重载. /* 参数类型不同的重载 */ public cl ...

  7. python之库组织

    python可重用代码库的组织依赖二个概念: 1. 模块 module 2. 函数 function 没有Java哪么灵活的包概念, 比较偏近C++的namespace.

  8. 总线（BUS）和总线操作

    1.什么是总线? 答:总线是运算部件之间数据流通的公共通道. 2.总线的作用? 答:提高专用信号处理逻辑电路的运算能力和速度. 3.总线与部件之间是怎么连接的? 答:各运算部件和数据寄存器组是通过带控 ...

  9. Java 8 VM GC Tunning Guide Charter 7-8-b

    第七章 并发gc Java 8提供两种并发gc,CMS和G1 Concurrent Mark Sweep (CMS) Collector This collector is for applicati ...

  10. 一点简单的关于ASP.NET下载

    一点简单的关于ASP.NET下载 个人简单的认为是有两种方法的,第一种就是直接用一个超链接链接到我们要下载的资源就可以了.只是说这个方法会有一点小问题就是,比如像图片或者文本文件这些浏览器是可以自动将 ...