单元测试

单元测试是指对软件中的最小可测试单元进行检查和验证,通过单元测试可以检测出潜在的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!
});

上面介绍的是单元测试的原理,事实上在我们写单元测试的时候并不需要自己写expecttest共用方法,需要用到的比对方法也远远不止toBe一个。我们可以直接用第三方库Jest,他包含了几乎所有我们需要的工具,使用方法官网都有,这里主要讲原理,使用方法不再赘述

JS单元测试及原理的更多相关文章

  1. 玩转Node.js单元测试

    代码部署之前,进行一定的单元测试是十分必要的,这样能够有效并且持续保证代码质量.而实践表明,高质量的单元测试还可以帮助我们完善自己的代码.这篇博客将通过一些简单的测试案例,介绍几款Node.js测试模 ...

  2. 啥时候js单元测试变的重要起来?

    作为一个菜鸟,开这个专栏其实不合适,但又突然发现这个比以往任何时候都重要,所以还是写写我的感受 首先,在传统的pc上也有大量的web站点和各种项目都有复杂的js,但是基本不做单元测试,为啥呢?因为传统 ...

  3. JS 单元测试

    JS单元测试,我工作时主要以mocha + chai 下面时具体的文档: mocha: https://mochajs.org/#asynchronous-code Chai: http://chai ...

  4. Sea.Js的运行原理(转)

    1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...

  5. 深入研究Node.js的底层原理和高级使用

    深入研究Node.js的底层原理和高级使用

  6. 前端测试框架对比(js单元测试框架对比)

    前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...

  7. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  8. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  9. 【JS单元测试】Qunit 和 jsCoverage使用方法

          近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的人来说,很难明白其中的意思,特此整理这篇文章,希望 ...

随机推荐

  1. rowStyle设置Bootstrap Table行样式

    日常开发中我们通常会用到隔行变色来美化表格,也会根据每行的数据显示特定的背景颜色,如果库存低于100的行显示红色背景 CSS样式 <style> .bg-blue { background ...

  2. 解决电脑性能一般,打开webstorm后,电脑比较卡的问题

    刚到一公司实习,要求使用webstrom开发前端,但安装后发现自己的电脑很卡,特别是在运行项目时,卡的不要不要的. 后来,发现一奇淫技巧,用sublime代替webstrom,但是没法启动项目啊 找到 ...

  3. 通过git从码云克隆项目到本地

    1.下载安装Git,傻瓜式下一步下一步即可... 2.配置Git: 2.1.选择你要clone到本地的路径:右键--->$ Git Bash Here,弹出Linux命令窗口:$ cd ~直接回 ...

  4. 51nod1160 压缩算法的矩阵——一道有趣的题

    https://blog.csdn.net/lunch__/article/details/82655579 看似高大上,实际也不太好想到 先尝试确定一些位: 给出了最后一列,sort得到第一列 0X ...

  5. 详解PhpStudy集成环境升级MySQL数据库版本

    http://phpstudy.php.cn/jishu-php-2967.html phpstudy里没有地方可以设置mysql数据库,很多人都疑惑在phpstudy里怎么升级mysql数据库版本, ...

  6. P1108 分解质因数

    题目描述 给你一个正整数 \(n\) ,请给 \(n\) 分解质因数,并按照样例输出的格式输出对应的结果. 输入格式 输入包含一个正整数 \(n (2 \le n \le 10^9)\) . 输出格式 ...

  7. CF351E Jeff and Permutation

    CF351E Jeff and Permutation 贪心好题 考虑每个对能否最小化贡献和 先不考虑绝对值相同情况 发现,对于a,b假设|a|<|b|,那么有无贡献只和b的正负有关!如果a在b ...

  8. element-ui tree 根据不同叶子节点设置是否显示复选框

    公司业务要求不同根节点配置显示与否复选框,官方文档没有这样的配置,所以想到了修改element-ui源码. 1.这里将“node_modules\element-ui\packages”下的tree文 ...

  9. Filter、Intercepter、AOP的区别

    在使用Spring MVC开发RESTful API的时候,我们经常会使用Java的拦截机制来处理请求,Filter是Java本身自带拦过滤器,Interceptor则是Spring自带的拦截器,而A ...

  10. vue-learning:10-template-ref

    使用ref直接访问DOM元素 传统DOM操作或jQuery操作DOM,都必须是选择器先选择对应的DOM元素.比如: <button id="btn">按钮</bu ...