JS单元测试及原理
单元测试
单元测试是指对软件中的最小可测试单元进行检查和验证,通过单元测试可以检测出潜在的bug,还可以快速反馈功能输出,验证代码是否达到预期,也可以保证代码重构的安全性。
有这样一个方法:
let add = (a, b) => a + b;
这是一个很简单的计算两个数的和的方法,假如我们想看看他的逻辑对不对,我们可以调用一下,然后跟我们预期的一个值比较下,如果不符合就抛出一个错误:
let add = (a, b) => a + b;
let result = add(1, 2);
let expect = 3;
if(result !== expect){
throw new Error(`1+2应该等于${expect},实际等于${result}`)
}
这其实就是单元测试的原理,但是这里写的方法太直白,而且不能复用,让我们改造下expect
,把它变成一个通用方法:
const expect = (res) => {
return {
toBe: (expectRes) => {
if(res !== expectRes){
throw new Error(`期望值是${expectRes},但实际上却是${res}!`)
}
}
}
}
我们前面期望1+2=3
,这其实就是一个单元测试用例,当我们有多个用例的话,我们可以用一种更通用优雅的方式来写用例,我们来写一个通用用例方法:
const test = (desc, fn) => {
try{
fn();
console.log(`${desc} -> PASS`)
}catch(e){
console.error(`${desc} -> FAIL`, e);
}
}
我们用这两个通用方法来改写下我们的单元测试:
let add = (a, b) => a + b;
const expect = (res) => {
return {
toBe: (expectRes) => {
if(res !== expectRes){
throw new Error(`期望值是${expectRes},但实际上却是${res}!`)
}
}
}
}
const test = (desc, fn) => {
try{
fn();
console.log(`${desc} -> PASS`)
}catch(e){
console.error(`${desc} -> FAIL`, e);
}
}
test('1+2=3', () => {
expect(add(1,2)).toBe(3); // 1+2=3 -> PASS
});
test('1+2=4', () => {
expect(add(1,2)).toBe(4); // 1+2=4 -> FAIL Error: 期望值是4,但实际上却是3!
});
上面介绍的是单元测试的原理,事实上在我们写单元测试的时候并不需要自己写expect
和test
共用方法,需要用到的比对方法也远远不止toBe
一个。我们可以直接用第三方库Jest,他包含了几乎所有我们需要的工具,使用方法官网都有,这里主要讲原理,使用方法不再赘述
JS单元测试及原理的更多相关文章
- 玩转Node.js单元测试
代码部署之前,进行一定的单元测试是十分必要的,这样能够有效并且持续保证代码质量.而实践表明,高质量的单元测试还可以帮助我们完善自己的代码.这篇博客将通过一些简单的测试案例,介绍几款Node.js测试模 ...
- 啥时候js单元测试变的重要起来?
作为一个菜鸟,开这个专栏其实不合适,但又突然发现这个比以往任何时候都重要,所以还是写写我的感受 首先,在传统的pc上也有大量的web站点和各种项目都有复杂的js,但是基本不做单元测试,为啥呢?因为传统 ...
- JS 单元测试
JS单元测试,我工作时主要以mocha + chai 下面时具体的文档: mocha: https://mochajs.org/#asynchronous-code Chai: http://chai ...
- Sea.Js的运行原理(转)
1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...
- 深入研究Node.js的底层原理和高级使用
深入研究Node.js的底层原理和高级使用
- 前端测试框架对比(js单元测试框架对比)
前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- vue.js响应式原理解析与实现
vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...
- 【JS单元测试】Qunit 和 jsCoverage使用方法
近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的人来说,很难明白其中的意思,特此整理这篇文章,希望 ...
随机推荐
- SQLSTATE[HY000] [2002] 错误
http://www.thinkphp.cn/topic/36194.html 使用tp框架 3.2.3 ,在windows上跑的时候没有任何问题,但是部署到linux系统和是哪个,就会报这个错,不知 ...
- cmd导入比较大的sql脚本
osql -S jack_c -d yourdb -U sa -P 123 -i E:\user.sql 注意: sql脚本里面一定要先创建数据库或者use到某个数据库,然后再cmd执行脚本
- spring+mybatis 整合
项目目录: 一.导入pom.xml依赖 最下边有 二.在applicationContext.xml配置连接器和数据库的数据源 三.流程:用户请求数据,springmvc解析url,通过控制器和适配器 ...
- 【原生JS】自动渐变轮播
渐变主要是通过CSS3的动画实现. 只需给css中添加transtion动画时间加上JS设置指定图片透明度显示与消失即可实现渐变过程. 效果图: HTML: <!DOCTYPE html> ...
- Python--day71--Cookie和Session
一.Cookie Cookie图示: 二.Session 引用:http://www.cnblogs.com/liwenzhou/p/8343243.html cookie Cookie的由来 大家都 ...
- zoj 2954 Hanoi Tower
Hanoi Tower Time Limit: 2 Seconds Memory Limit: 65536 KB You all must know the puzzle named "Th ...
- Mule ESB 自带例子hello初体验
1 配置的流的效果图 2 应用配置文件hello.xml内容 <?xml version="1.0" encoding="UTF-8"?> < ...
- [全+转载] solaris 网络配置
===================== 较为重要的几个文件: /etc/nodename 主机名(即 hostname命令的输出) /etc/defaul ...
- js 页面分享
首先说分享到QQ空间的通用代码:<a href="javascript:void(0);" onclick="window.open('http://sns.qzo ...
- turtle 20秒画完小猪佩奇“社会人”
转载:https://blog.csdn.net/csdnsevenn/article/details/80650456 图片源自网络 作者 丁彦军 如需转载,请联系原作者授权. 今年社交平台上最火的 ...