用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…

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

关于 Karma 会是一个系列,讨论在各种环境下,使用 Karma 进行单元测试. 本文讨论 karma 集成 Jasmine 进行单元测试. 初始化 NPM 实现初始化 NPM 包管理,创建 package.json 项目管理文件. 使用参数 -y 直接按照默认值创建 packgae.json 项目管理文件. PS C:\study\mykarma> npm init -y Wrote to C:\study\mykarma\package.json: { "name": &q…

Karma和Jasmine自动化单元测试

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏览器就基于V8,同时打开20-30个网页都很流畅.Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低.非常适合小型网站,个性化网站,我们自己的Geek网站!! 关于作者张丹(Conan), 程序员Java,R,PHP,Java…

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

最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma. Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具可用于测试所有主流Web浏览器,也可集成到C…

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

1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的名字,表示佛教中的缘分,因果报应,比Cassandra这种名字更让人猜不透! Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代…

Angularjs 基于karma和jasmine的单元测试

目录: 1. 单元测试的配置 2. 实例文件目录解释 3. 测试controller 3.1 测试controller中变量值是否正确 3.2 模拟http请求返回值,测试$http服务相关 4. 从文件中读取json,来模拟 http请求返回数据 5. 测试返回promise的service 已经有很多教程提到了angularjs项目的单元测试,但大都不是很全,如一些入门的文章,介绍了测试http service 却没有介绍如何从文件中读取测试数据来仿真.一些介绍如何从文件中读…

使用karma+jasmine做单元测试

目的使用karma和jasmine来配置自动化的js单元测试. Karma和Jasmine Karma是由Angular团队所开发的一种自动化测试工具.链接:http://karma-runner.github.io/ Karma会启动PhantomJS实例来运行测试,可以在其上使用Jasmine.Mocha等测试框架,也可以和Jenkins.Travis等CI(Continuous Integration,持续集成)进行整合. Jasmine是一个按照BDD(behavior-driven…

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 jasmineRe…

React Jest测试

一. var jest = require('jest'); jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel', function() { it('changes the text after click', function() { var React = require('react/addons'); var CheckboxWithLabel = require('../CheckboxWithL…

React开发项目例子

一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2.确定发目标: 3.确定开发顺序 4.开发流程介绍测试采用TDD 二.代码 1.Card.js var React = require('react/addons'); var Card = React.createClass({ getInitialState: function() { retu…

React-用Jest测试

一. 1.目录结构二.代码 1.CheckboxWithLabel.jsx var React = require('react/addons'); var CheckboxWithLabel = React.createClass({ getInitialState: function() { return { isChecked: false }; }, onChange: function() { this.setState({ isChecked: !this.state.isChec…

JavaScript单元测试框架-Jasmine

Jasmine的开发团队来自PivotalLabs,他们一开始开发的JavaScript测试框架是JsUnit,来源于著名的JAVA测试框架JUnit.JsUnit是xUnit的JavaScript实现.但是JsUnit在2009年后就已经停止维护了,他们推出了一个新的BDD框架Jasmine.Jasmine不依赖于任何框架,所以适用于所有的Javascript代码. 所谓BDD(行为驱动开发,Behaviour Driven Development),是一种新的敏捷开发方法.Dan North…

Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告

1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration). 这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行,通过console.log显示测试结果. 2. Karma集成Jasmine进行单元测试 a.初始化 NPM 实现初始化 NPM 包管理,创建 package.json 项目管理文件.…

基于karma和jasmine的Angularjs 单元测试

Angularjs 基于karma和jasmine的单元测试目录: 1. 单元测试的配置 2. 实例文件目录解释 3. 测试controller 3.1 测试controller中变量值是否正确 3.2 模拟http请求返回值,测试$http服务相关 4. 从文件中读取json,来模拟 http请求返回数据 5. 测试返回promise的service 已经有很多教程提到了angularjs项目的单元测试,但大都不是很全,如一些入门的文章,介绍了测试http service 却…

搭建Karma+Jasmine的自动化单元测试

最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istanbul代码覆盖率. 据我了解,Nodejs领域: Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm做nodejs的包依赖管理,bower做javascript的包依赖管理. Karma的介绍 Karma是一个…

React常用的API说明

楼主刚开始学习react,感受到了他的博大精深,看到很多莫名的用法,不知云云,找了很多没有找到参考手册,只有在中文社区和react官方看了一些,收集了一些比较常用的API,有补充的可以楼下评论补充.后面会继续更新的. ***************************************action**************************************** React 常用顶层API: React.createClass:创建一个组件类,并作出定义.组件实现了 re…

react-redux单元测试(基于react-addons-test-utils,mocha）

今天补上上次新闻客户端欠下的单元测试.新闻客户端github地址:点我,接上篇博客. 本次单元测试用到了单元测试比较流行的测试框架mocha,用到的是expect断言库,和react官方的测试插件:react-addons-test-utils. 那本次单元测试的地址在github上另起一个分支,来区别一下两次提交.本次单元测试地址:点我 npm install && npm test 即可测试该项目通过本次单元测试,不仅添加了测试,还发现了原先作品的一些问题,这也是函数式编程所注意的地…

React.js深入学习详细解析

今天,继续深入学习react.js. 目录: 一.JSX介绍二.React组件生命周期详解三.属性.状态的含义和用法四.React中事件的用法五.组件的协同使用六.React中的双向绑定一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字…

React.js入门必须知道的那些事

首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性能而使用虚拟DOM作为其不同的实现. 它同时也可以由服务端Node.js渲染 - 而不需要过重的浏览器DOM支持, React实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单.因其新颖独特, 目前在国内还没有很多的应用.但是其性能出众,代码逻辑简单,近来越来越火.目前还…

初探React，将我们的View标签化

前言我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候你一个飞机以及装备还没满级,新的装备就又出来了,并且一定是更强! 于是很多人便直接抛弃当前的飞机与装备,追求更好的,这个时候如果是人民币玩家或者骨灰级大神玩家的话,基本可以很快站在世界的顶端,一者是装备好,一者是技术好,但是我不愿意投入太多钱,也不愿意投入过多精力,于是在一套极品装备满级后会积累资源…

React的双向绑定

以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式.有2种方式分析,1:不用插件,2:用插件 (引入react.js操作省略...) 不用插件: 先创建react组件 var NoLink = React.createClass({}); React.render(<NoLink />,document.body); 组件创建好了,需要一个初始化变量,来公用显示输入的数据 var NoLink = React.createClass({ getI…

用Sublime 3作为React Native的开发IDE- 转

转-http://www.cnblogs.com/wangshuo1/p/react_native_02.html Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮的用户界面和非凡的功能,Sublime Text的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等. 1.下载安装Sub…

React（二）实现双向数据流

<div id="app"></div> <script src="bower_components/react/react.min.js"></script> <script src="bower_components/react/react-dom.min.js"></script>  <script src=&…

Karma：2. 集成 Karma 和 mocha 进行单元测试

上一篇文章讨论了如何集成 Karma 和 Jasmine,地址见:Karma:1. 集成 Karma 和 Jasmine 进行单元测试这篇文章讨论如何 Karma 集成 mocha 测试框架. 安装 mocha 组件我们需要分为两个部分,基本的 mocha 测试框架和 karma 的 mocha 插件. 安装 mocha 和 chai mocha 是一个测试框架,自己已经提供了一套断言,但是,我们通常会需要使用类似 Jasmine 风格的断言,通过 chai 这个断言库,可以提供 expec…

React直出实现与原理

前一篇文章我们介绍了虚拟DOM的实现与原理,这篇文章我们来讲讲React的直出. 比起MVVM,React比较容易实现直出,那么React的直出是如何实现,有什么值得我们学习的呢? 为什么MVVM不能做直出? 对于MVVM,HTML片段即为配置,而直出后的HTML无法还原配置,所以问题不是MVVM能否直出,而是在于直出后的片段能否还原原来的配置.下面是一个简单的例子: <sapn>Hello {name}!</span> 上面这段HTML配置和数据在一起,直出后会变成: <s…

React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE

Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮的用户界面和非凡的功能,Sublime Text的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等. 1.下载安装Sublime 3 Sublime 3的下载地址: http://www.sublimetext.com/3 选着相应的平…