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

柔光的暖阳◎ 2023-09-27 10:48 35阅读 0赞

前端自动化测试，在写通用库的时候，为了严谨通常都要带上的。当然在实现部分业务代码，可能也会考虑写测试用例，只不过这块的投入成本往往比较大，投入产出比性价比不够高。目前主流的测试框架有：Jasmine、Mocha、Jest等，他们都很优秀，易用性也很强，功能也强大。这里我们不比较他们的优劣势了，只聊聊Jest这个框架。

### 一、Jest优点 ###

Jest是Facebook的一套开源JavaScript测试框架，专注于简洁明快。像Babel、TypeScript、Node、React等优秀的项目都在使用它。它有几大优秀：

1.  零配置 在大部分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测试框架，下一章看看如何写测试用例以及如何看测试的好坏。

**喜欢软件测试的小伙伴们，如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一 键三连哦！**  
![在这里插入图片描述][e5839dcedca14117aff9fd1945058bd6.gif_pic_center]

[e5839dcedca14117aff9fd1945058bd6.gif_pic_center]: https://img-blog.csdnimg.cn/e5839dcedca14117aff9fd1945058bd6.gif#pic_center