前言:
以前写过潦草的单元测试,当时用的测试框架是mocha, 断言库是用的chai,之后往下学习之后,发现mocha的学习成本有点高,后来就不了了之了,这次我又重学了一下前端的单元测试,发现这次学习的相对来说比较轻松,为什么呢? 因为这次我选用了Jest测试框架, 对于我这种单元测试小白都能用起来、跑起来,而且Jest可以说是零配置,开箱即用,不过对于我这种想深入学习单元测试的,还是得好好看一下官方文档,说不定会用到高级配置的时候,防范于而未然!
主要还是记录一下对Jest踩得坑,这篇文章不是深入的文章,只是简单的入门!!
由于本人使用TypeScript进行书写的代码,所以配置和js的稍微有点不同!
好了,下面步入正题!
介绍
开始学习之前呢,还是得看一下官方对Jest的解释(先扒一扒官网...):
- Jest aims to work out of the box, config free, on most JavaScript projects.
- Make tests which keep track of large objects with ease. Snapshots live either alongside your tests, or embedded inline.
- Tests are parallelized by running them in their own processes to maximize performance.
- From
it
toexpect
- Jest has the entire toolkit in one place. Well documented, well maintained, well good.
对于我这种英语都忘了的人,就得用翻译软件了,对应下面的解释:
- Jest的目标是在大多数JavaScript项目中开箱即用,免费配置。
- 轻松地进行跟踪大型对象的测试。快照可以与测试一起使用,也可以嵌入到内联中。
- 测试通过在它们自己的进程中运行来并行化,以最大化性能。
- Jest将整个工具包放在一个地方。良好的文档,良好的维护。
总结一下Jest的特点是:
简单配置、快速入门、可以进行快照测试、最大的测试速度、文档良好(对于英语差的小伙伴怎么算好?), 另外Jest内置断言、异步测试、自定义测试函数等等,可以说很灵活。
另外可以支持的项目包括:Babel、TypeScript、Node、React、Angular、Vue等等
详细的可以去 jestjs.io/zh-Hans/ 这个中文官方首页去看一下!
虽然是个中文文档,但是翻译不全,英语过关的小伙伴可以去英文的官方文档去看!
① 安装
首先呢,要使用Jest的话,得先安装npm包,用cmd进入到你的项目目录,输入如下命令:
cnpm install --save-dev jest typescript ts-jest @types/jest
使用js的小伙伴可以执行如下命令:
npm install --save-dev jest
我这里使用淘宝镜像,可以加快下载速度和安装速度,没有安装的小伙伴可以在命令行输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样的话就可以就可以使用cnpm,也就是淘宝镜像了,下载速度和安装速度快的一批,应该99%都会的小伙伴装的,可以说没有人不知道的。
② 初始化配置文件
安装好之后呢,要有一个jest.config.js配置文件,这个Jest很友好,只需执行一句命令就可以创建这个配置文件。在命令行(cmd)并且在你的项目目录下执行如下命令:
npx ts-jest config:init
使用js的小伙伴,命令如下:
jest --init
使用ES5以上语法的需要babel,需执行一下命令:
cnpm install --save-dev babel-jest @babel/core @babel/preset-env
接下来就可以在项目根目录创建一个babel.config.js
文件用于配置与你当前Node版本兼容的Babel:
// babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
具体配置可以去看官方文档
③ 在package.json文件中添加命令
接下来要在package.json文件中添加一条命令,方便我们执行测试命令:
{
"script": {
"test": "jest"
}
}
如果你的package.json里有script属性字段,则直接添加"test": "jest"!
④ 在tsconfig.json文件找到paths属性并添加如下配置:
"paths": {
"@App/*": ["src/baseTs/*"]
}
这个是什么意思呢?就是设置测试的目录文件的路径.(我这里测试的文件在baseTs里,一些基础的函数)
@App/*就是相当于webpack中的alias一样,就是个别名,不要被吓到!
⑤ 在jest.config.js文件添加如下配置:
const { default: tsjPreset } = require('ts-jest/presets');
module.exports = {
preset: 'ts-jest',
rootDir: './' transform: {
...tsjPreset.transform
},
testRegex: '(/test/.*\\.(test|spec))\\.[tj]sx?$',
moduleFileExtensions: [
"ts",
"tsx",
"js",
"jsx"
],
moduleNameWrapper: {
'^@APP/(.*)$': '<rootDir>/src/baseTs/$1'
},
collectCoverageFrom: {
"**/baseTs/upperFirst.ts",
"**/baseTs/camelCase.ts",
"!**/node_modules/**",
"!**/vendor/**"
}
}
好了这些就够了,你现在不需要了解每一项是什么意思,后面我会以注释的格式展现出来,作为参考,现在你就只管copy和paste就可以了!
注意:测试覆盖率这里我只设置了baseTs下的两个文件,也就是upperFirst.ts和camelCase.ts!
⑥ 在项目根目录添加一个目录叫test的目录,如下:
这个目录就是我们要写测试baseTs目录下的目录。
⑦ 下面开始简单的写一下测试文件:
在写之前呢,首先要注意如下:
- 在test目录下创建的测试文件名字最好要和被测试的文件名字保持一致。如:upperFirst.ts文件对应测试文件upperFirst.test.ts(不是必须的)
- 如果是用ES6模块export导出,在测试文件中可以用import导入,否则使用module.exports导出,使用require进行导入
- 导入文件的时候要以@App/为前缀,如果你的项目配置了像@(代表src目录)这样的alias,使用会报错的
其中test接收两个参数,第一个就是要预判的结果字符串,第二个是一个函数(当测试异步函数的时候,这里应该会有一个done参数)
调用expect函数,这个函数接收一个要运行的函数,如上图。
toBe函数呢就是输出的结果了,这个函数可以测试一些基本类型的数据。
写法呢,和用过mocha + chai的写法差不多,很容易写出一个测试代码!
然后在命令行执行如下命令:
npm run test
就可以执行测试了,测试结果如下图:
在测试一下下一个文件:
这里我用了一个叫describe函数,回调函数包裹了两个要测试的断言。
这个describe函数就是套件,套件可以一组一组的进行测试,其他各大测试框架都内含了测试套件,不足为其!
接下来看一下测试结果,如下:
都通过了,是不是很开心呢!
解释一下覆盖率(也就是图中的表格每个单元格代表的含义):
% stmts是语句覆盖率(statement coverage):每个语句是否都执行了
% Branch分支覆盖率(branch coverage):条件语句是否都执行了
% Funcs函数覆盖率(function coverage):函数是否全都调用了
% Lines行覆盖率(line coverage):未执行的代码行数
我这里除了条件语句一半左右,其他的都是90%以上,说明代码质量还可以。
当然能有这么通过率,一是代码比较简单,二是单元测试可以让我们知道代码的质量如何,之后再进行改造重构,就可以出来质量高的代码了,以我这两个文件中的其中一个为例(改造之后的代码):
虽然这个简单的驼峰函数改造之后有点长,但基本符合了面向对象的一条比较重要的准则,即单一职责,一个函数只做一件事情!也基本符合开放封闭原则,因为主函数是有零碎的小函数拼起来的,所以,以后如果我们想改造这个主函数,只需在零碎的函数里改造就可以了,主函数是不需要动的。
例如我想在修改正则的判断,只需在正则函数里修改即可,别的函数都不需要动!
所以说单元测试真的很重要,许多小伙伴可能没有写过,如果你写了单元测试之类的就会改善你现有的代码,从而更好的重构,结果就是质量、维护程度上都提升了很大的层次!
好了,对这两个函数进行了测试,我们最后呢,来看一下Jest的基础配置是怎样的,我是花了一下午的时候进行了筛选,符合刚入门的小伙伴们,对于高级的配置可以去官方文档去查阅,
这里我都用注释进行了说明(个人理解)!!!
下图是Jest.config.js配置:
大家可以根据自己的项目情况和目录,自由的设置,个人尽可能的让注释详细,方便小伙伴进行查阅。由于本人又入了单元测试的坑,还需要继续努力研究,希望大佬可以指出错误的地方,如果有一些关于Jest单元测试的技巧或文章,还请在评论下附一下链接和建议之类的
下面附一下链接:
Jest中文官网首页地址:jestjs.io/zh-Hans/
ts-jest文档地址: kulshekhar.github.io/ts-jest/
Jest配置文档地址:jestjs.io/docs/zh-Han…
以上的配置都是参考第二,第三地址!!