热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【函数】如何保证代码质量

目录:1、单元测试2、单元测试代码3、JEST基础使用单元测试什么是单元测试?测试是一种验证我们的代码是否可以按预期工作的方法。换句话说,就是写一些代码来验证一段代码是否能得到预期

目录:

1、单元测试

2、单元测试代码

3、JEST基础使用

 

单元测试

什么是单元测试?

  测试是一种验证我们的代码是否可以按预期工作的方法。换句话说,就是写一些代码来验证一段代码是否能得到预期设计代码时所期望的结果。被测试的对象可以是样式、功能、流程、组件等。

  单元测试是指对软件中最小可测试单元进行检查和验证。是开发这编写的一小段代码用于检测被测代码的一个很小的很明确的功能是否正确,通常而言,一个单元测试是用于判断某个特定条件或者是场景下某个特定函数的行为。

  作为一个前端工程师,前端单元测试可以提高我们的工作效率。第一,可以检测出潜在的bug。第二、可以快速反馈功能输出,验证代码是否达到预期。大三、可以保证代码重构的安全性。第四、方便协作开发。

 

单元测试代码

什么是被测试对象?

  被测试对象为程序中最小组成单元,这里的最小组成单元可以是一个函数Function、一个方法集合 module 或者类等等。被测试对象可以做到孤立的验证。

  例如,下面代码中,一个是返回两数之和的 add 函数, 一个是返回两数之差的 substraction 函数,这两个函数都可以被理解为被测试对象。



 

    //被测试对象

    let add = ( ab => a + b;

    let substraction = ( ab => a - b;

 

 什么是测试代码?

  下面是一段简单的测试代码:



 

   //测试代码

    let expect = ( res ) => {

        return {

            toBe: ( actual ) => {

                ifres !== actual ){

                    throw new Error(‘预期值与实际值不符‘);

                }

            }

        }

    }

 

  这个测试代码是一个方法,它接收一个 res 参数,这也就是函数返回的值,返回的 toBe 方法接受一个 actual 参数,在 toBe 方法里面我们对实际值和预期值进行一个对比,如果不相等就抛出错误。

  下面测试一下 add 函数:



 

    //被测试对象

    let add = ( ab ) => a + b;

    //测试代码

    let expect = ( res ) => {

        return {

            toBe: ( actual ) => {

                ifres !== actual ){

                    throw new Error(‘预期值与实际值不符‘);

                }

            }

        }

    }

    //调用

    expectadd(12) ).toBe3 );

 

  调用 expect 方法,expect 方法接受一个参数,这个参数是 add 函数的返回值,之后又返回一个 toBe 方法, toBe 方法也接受一个参数,而这个参数就是预期值。

  这段代码的运行结果:

技术图片

  此时,没有问题,说明 add() 方法没有问题。

  其它代码不变,改一下 add 方法,将 + 改成  * ,使之不合预期,改成这样:



 

    //被测试对象

    let add = ( ab ) => a * b;

 

  代码运行结果:

技术图片

  此时抛出一个错误,输出 “ 预期值与实际值不符 ”,这说明 add 方法有问题,我们需要对 add 方法进行调整,调整到测试通过。

 

  还可以写得更详细一些:



 



    //被测试对象

    let add = ( ab ) => a + b;

    //测试代码

    let expect = ( res ) => {

        return {

            toBe: ( actual ) => {

                ifres !== actual ){

                    throw new Error(‘预期值与实际值不符‘);

                }

            }

        }

    }

    let test = (descfn=> {

        try{

            fn();

        }catch(e){

            console.log(`${desc}没有通过`);

        }

    }

    test(‘加法测试‘, ()=>{

        //调用

        expect(add(12)).toBe(3);

    });



 

  定义一个 test 方法,接收的参数 desc 是我们的描述,接收的参数 fn 是一个函数。在函数 test 里进行一个 try... catch 处理,如果没有错误,就执行 fn(), 如果有错误,就捕捉错误,将错误打印出来。调用 test 方法时,第一个参数传入 “加法测试”,第二个参数出传入一个回调函数,在回调函数里调用 expect() 方法。

  运行结果:

技术图片

  此时,没有问题,说明 add() 方法没有问题。

  其它代码不变,改一下 add 方法,将 + 改成  * ,使之不合预期,改成这样:



 

    //被测试对象

    let add = ( ab ) => a * b;

 

  代码运行结果:

技术图片

   此时抛出一个错误,输出 “ 加法测试没有通过 ”,这说明 add 方法有问题,我们需要对 add 方法进行调整,调整到测试通过。

   在实际开发中,我们会使用一些第三方的库来满足我们的开发需求。

 

Jest 的基础使用

  Jest 是 Facebook 的一套开源的 Javascript 测试框架,它集成了开发者需要的所有测试工具,是一款几乎零配置的框架,并且它对 react 测试十分友好。

Jest 的安装

  Jest 可以通过 npm 安装,所以它要求必须要有 Node 环境,之后可以在 cmder 中通过 npm i -D jest 或者 yarn add -D jest 进行安装,通过 npm ls jest 查看是否安装成功,如果出现版本号说明安装成功。

  打开 cmder,首先通过 npm init -y 生成一个 package.json,接着使用 npm i -D jest 进行安装,接着使用 npm ls jest 查看是否安装成功,安装成功后开始使用 jest ,通过 code . 命令可以打开 vscode

技术图片

技术图片

  在 vscode 中新建一个文件 math.js,  将被测试对象 add 输出。

  math.js:



 

let add = (ab=> a + b;

module.exports = { add };

 

  在同目录下新建一个文件 math.test.js,  将被测试对象 add 引入,使用 test 方法测试函数 add



 

const { add } = require(‘./math‘);

test(‘加法测试‘, ()=>{

    expectadd(1,2) ).toBe3 );

})

 

  写好测试代码后修改 package.json

技术图片

   接着,在cmder 中运行一下,输入 npm run test :

技术图片

  测试通过。

  那么下面来看看测试不通过是啥样的。其它代码不变,改一下 add 方法,将 + 改成  * ,使之不合预期,改成这样:

技术图片

   在cmder 中运行一下,输入 npm run test :

技术图片

  加法测试不通过。

 

使用 Jest 进行测试的 4 个步骤:

  创建被测试对象 math.js  ?? 创建 test 文件 math.test.js ?? 修改 package.json 文件 ?? 执行 npm test

 

【函数】如何保证代码质量



推荐阅读
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文内容为asp.net微信公众平台开发的目录汇总,包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建(接入)、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面,适合综合运用。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]
author-avatar
手机用户2502877255
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有