「这是我参与11月更文挑战的第23天,活动详情查看:2021最后一次更文挑战」
前端自动化测试,在写通用库的时候,为了严谨通常都要带上的。当然在实现部分业务代码,可能也会考虑写测试用例,只不过这块的投入成本往往比较大,投入产出比性价比不够高。目前主流的测试框架有:Jasmine
、Mocha
、Jest
等,他们都很优秀,易用性也很强,功能也强大。这里我们不比较他们的优劣势了,只聊聊Jest这个框架。
一、Jest优点
Jest是Facebook的一套开源JavaScript测试框架,专注于简洁明快。像Babel
、TypeScript
、Node
、React
等优秀的项目都在使用它。它有几大优秀:
- 零配置
在大部分JavaScript项目上实现开箱即用,无需配置。
2. 快照
能够轻松追踪大型对象的测试。快照可以与测试代码放一起,也可以集成进代码行内。
3. 隔离
测试程序拥有自己独立的进程,以最大限度地提高性能。
4. 优秀的Api
从 it
到 expect
- Jest 将整个工具包放在同一个 地方。好书写、好维护、非常方便。
5. 支持覆盖率
通过添加 --coverage
标志生成代码覆盖率报告, 无需额外设置。
它的优势非常多,不仅于此,感兴趣的可以前往官网查看。
二、Jest使用和配置
这里的环境我们按照TypeScript进行配置,毕竟现在基本都用它了。
- 安装包
// 1. 安装jest
npm install --save-dev jest
// 当然你也可以全局安装
npm install jest -g
// 2. 生成基础配置文件
jest --init
// 3. 使用babel,为了能够兼容当前Node版本
npm install babel-jest @babel/core @babel/preset-env --save-dev
// 4. 使用typescript,所以需要安装对应包
npm install @babel/preset-typescript --save-dev
复制代码
- 配置babel
babel的配置如下,只不过要注意的是:presets
的配置,它的执行顺序是从后往前执行的,如果babel有配置plugins
它的执行顺序是从上往下掉。
// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
'@babel/preset-typescript',
]
};
复制代码
- 配置npm script
// package.json
{
"scripts": {
"test": "jest"
}
}
复制代码
配置到这,基本的Jest测试框架环境就好,执行npm run test
就会执行测试用例了。
总结
到这里便搭建了一个基本的Jest测试框架,下一章看看如何写测试用例以及如何看测试的好坏。