Jest ｜测试框架实践之-基础知识和环境搭建

「这是我参与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测试框架，下一章看看如何写测试用例以及如何看测试的好坏。