热门标签 | 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

 

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



推荐阅读
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 解决 Windows Server 2016 网络连接问题
    本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]
  • 本文详细解析了Autofac在高级应用场景中的具体实现,特别是如何通过注册泛型接口的类来优化依赖注入。示例代码展示了如何使用 `builder.RegisterAssemblyTypes` 方法,结合 `typeof(IEventHandler).Assembly` 和 `Where` 过滤条件,动态注册所有符合条件的类,从而简化配置并提高代码的可维护性。此外,文章还探讨了这一方法在复杂系统中的实际应用及其优势。 ... [详细]
  • 本文详细介绍了如何解决DNS服务器配置转发无法解析的问题,包括编辑主配置文件和重启域名服务的具体步骤。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • 解决Parallels Desktop错误15265的方法
    本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • 在 LeetCode 的“有效回文串 II”问题中,给定一个非空字符串 `s`,允许删除最多一个字符。本篇深入解析了如何判断删除一个字符后,字符串是否能成为回文串,并提出了高效的优化算法。通过详细的分析和代码实现,本文提供了多种解决方案,帮助读者更好地理解和应用这一算法。 ... [详细]
  • 系统数据实体验证异常:多个实体验证失败的错误处理与分析
    在使用MVC和EF框架进行数据保存时,遇到了 `System.Data.Entity.Validation.DbEntityValidationException` 错误,表明存在一个或多个实体验证失败的情况。本文详细分析了该错误的成因,并提出了有效的处理方法,包括检查实体属性的约束条件、调试日志的使用以及优化数据验证逻辑,以确保数据的一致性和完整性。 ... [详细]
  • 装饰者模式(Decorator):一种灵活的对象结构设计模式
    装饰者模式(Decorator)是一种灵活的对象结构设计模式,旨在为单个对象动态地添加功能,而无需修改原有类的结构。通过封装对象并提供额外的行为,装饰者模式比传统的继承方式更加灵活和可扩展。例如,可以在运行时为特定对象添加边框或滚动条等特性,而不会影响其他对象。这种模式特别适用于需要在不同情况下动态组合功能的场景。 ... [详细]
  • 本项目通过Python编程实现了一个简单的汇率转换器v1.02。主要内容包括:1. Python的基本语法元素:(1)缩进:用于表示代码的层次结构,是Python中定义程序框架的唯一方式;(2)注释:提供开发者说明信息,不参与实际运行,通常每个代码块添加一个注释;(3)常量和变量:用于存储和操作数据,是程序执行过程中的重要组成部分。此外,项目还涉及了函数定义、用户输入处理和异常捕获等高级特性,以确保程序的健壮性和易用性。 ... [详细]
  • 本文对SQL Server系统进行了基本概述,并深入解析了其核心功能。SQL Server不仅提供了强大的数据存储和管理能力,还支持复杂的查询操作和事务处理。通过MyEclipse、SQL Server和Tomcat的集成开发环境,可以高效地构建银行转账系统。在实现过程中,需要确保表单参数与后台代码中的属性值一致,同时在Servlet中处理用户登录验证,以确保系统的安全性和可靠性。 ... [详细]
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社区 版权所有