前言
身为一名大前端开发人员,在度过了初级开发水平的级别后,是不是经常会有一些困惑:我这代码确实能实现开发需求,但是总感觉有更“优雅”的解决方式,总感觉有些冗余,总感觉可维护性没有那么强,总感觉有些地方有bug但是自己在功能性测试的实操中又测不出来;那么问题来了,有没有总结好的一些方法论,让我们自己测试时更加全面,更加“颗粒化”,让我们代码无论是在可阅读性亦或时可维护性方面得到直观的提升呢?当然有!以前我也不懂,也迷惑,经过了一段时间的学习后,总结出了以下几点,请容我娓娓道来:
1.从单元测试开始
1.1 单元测试的含义:
首先什么是测试,测试是一种验证代码执行效果是否与预期一致的方法。 单元测试就是能进行最小化颗粒度的一种测试,即对软件中最小可测试单元进行的测试和验证。
1.2 单元测试的意义
1.找出代码中潜在bug
2.快速反馈功能输出,验证代码执行效果是否达到预期;
3.方便协作开发;
4.保证代码重构安全性;
1.3 单元测试原理及示例:
let addFn = (a,b) => a + b //一段最基本的纯函数,就可以视为一个最小的单元,也就是我们的被测试对象
//测试原理:执行函数时,把函数执行的结果与期望值相比较,如不同则抛出错误。
//测试代码 (定义一个期望函数,他的返回值是拥有将测试函数执行结果与期望值相比较的一个函数,当期望函数执行时,调用返回值里面的toBe方法,则可验证此单元测试结果与期望值是否相同,从而得到测试是否通过的结论)
let expext = (testRes) =>{
return {
toBe: (wantRes) =>{
if (testRes !== wantRes){
throw new Error('预期值与实际值不相等哦~')
}
}
}
}
let test = (descTestText,fn)=>{
try {
fn()
}catch(e) {
throw new Error(`${descTestText}有问题,${e}`)
}
}
test('求和测试',(()=>{
expext(addFn(1,5)).toBe(5)
}))
//当输入值与测试预期值不相等时,报错:
VM1171:18 Uncaught Error: 求和测试有问题,Error: 预期值与实际值不相等哦~
at test (<anonymous>:18:15)
at <anonymous>:22:1
1.4 单元测试在项目中一般如何运用
项目中一般会运用成熟的测试框架来对前端代码进行单元测试,这里就拿javaScipt中“Jest框架”来进行运用举例:
1.4.1 Jest的基础介绍
Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架。
1.4.2 Jest的安装
Jest可以直接通过npm或者是yarn 一键安装
npm install -D jest 或者 yarn add -D jest 安装
安装完成后可以实用 npm ls jest 查看安装版本等信息
1.4.3 Jest测试原理
其原理和1.3中介绍的很相似,详情请回看1.3
1.4.4 Jest实战实用
初始化项目
npm init -y
在项目初始化之后,创建一个需要被测试的文件,并将需要被测试的方法暴露:
let add = (a,b) => a+b;
module.exports = { add };
之后再创建一个测试文件,用于对被测试方法的测试:
如:add.js
const { add }= require('./add.js');
test('求和测试',()=>{
expect(add(1,2)).toBe(3)
})
接下来我们只需要再package.json中修改执行脚本:
"scripts": {
"test": "jest"
},
最后再执行脚本命令
npm run test
如果成功,会在终端看到如下:
PASS ./add.test.js
√ 求和测试 (2 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.772 s
Ran all test suites.
好了,这就是编写高质量代码学习笔记的第一节,下节我们将介绍本专栏第一个大干货,真正完成 “代码脱胎换骨” 第一步!
点击编写高质量代码(二)即可查看,为了优雅,不见不散~~