前端测试框架，我们了解的一样吗？

末蓝、 2023-09-25 16:33 30阅读 0赞

最近在写前端单元测试，基本的测试很容易就测试完成，也总结了部分，不过编写起来，尤其是针对chart库这块的测试，不是很轻松。故，把前端常用的测试框架了解、比对，记录一下，加深下了解。

**如果个人理解有误，欢迎评论区，评论留言~**

### E2E test (End To End test) ###

![format_png][]

### Unit Test - 单元测试框架 ###

#### Mocha、Jasmine、Karma 份额 ####

![format_png 1][]

#### Mocha、[Jasmine][]、Karma 比较 ####

<table> 
 <thead> 
  <tr> 
   <th>Test Framework</th> 
   <th>特性</th> 
   <th>学习成本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Mocha</td> 
   <td>社区很强大 、鲁棒性、前后端语法一致</td> 
   <td>学习曲线低、复杂度高</td> 
  </tr> 
  <tr> 
   <td>Jasmine</td> 
   <td>易用、内置断言功能</td> 
   <td>学习曲线低</td> 
  </tr> 
  <tr> 
   <td>Karma</td> 
   <td>可靠、易上手</td> 
   <td>运行挺耗时间</td> 
  </tr> 
 </tbody> 
</table>

#### 前端框架选择的单元测试框架情况 ####

![format_png 2][]

> 我们可以看到，

*  Angularjs 选择 Karma,Jasmine 居多。
    
     *  从Angularjs升级过来的Angular项目，也是保持这样选择的。利用Jasmine语法编写测试用例，交给Karma 在Command line中执行，得到测试结果，最后得到测试报告文件。
 *  React 选择 Mocha 居多

#### 拓展 ####

Jasmine语法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>toBe</td> 
   <td>值的比较</td> 
  </tr> 
  <tr> 
   <td>toEqual</td> 
   <td>对象比较</td> 
  </tr> 
  <tr> 
   <td>toMatch</td> 
   <td>正则比较</td> 
  </tr> 
  <tr> 
   <td>toBeDefined</td> 
   <td>返回值有定义</td> 
  </tr> 
  <tr> 
   <td>toBeUndefined</td> 
   <td>返回没有定义</td> 
  </tr> 
  <tr> 
   <td>toBeNull</td> 
   <td>检测是否null</td> 
  </tr> 
  <tr> 
   <td>toBeTruthy</td> 
   <td>检测是否true</td> 
  </tr> 
  <tr> 
   <td>toBeFalsy</td> 
   <td>检测是否false</td> 
  </tr> 
  <tr> 
   <td>toContain</td> 
   <td>检测是否包含特定的值</td> 
  </tr> 
  <tr> 
   <td>toBeLessThan</td> 
   <td>检测是否小于</td> 
  </tr> 
  <tr> 
   <td>toBeGreaterThan</td> 
   <td>检测是否大于</td> 
  </tr> 
  <tr> 
   <td>toBeCloseTo</td> 
   <td>关于浮点数进行精确比较</td> 
  </tr> 
  <tr> 
   <td>toThrow</td> 
   <td>检测是否抛出异常了</td> 
  </tr> 
  <tr> 
   <td>toHaveBeenCalled</td> 
   <td>检测方法是否被调用了</td> 
  </tr> 
  <tr> 
   <td>toHaveBeenCalledWith</td> 
   <td>检测是否使用特定的参数调用了</td> 
  </tr> 
 </tbody> 
</table>

不容忽视的Jest

*  安装简单

# npm
    npm install -D jest
    
    #yarn 
    yarn add -D jest
    复制代码

*  运行速度
    
     *  并行运行
     *  运行慢的，优先执行
 *  mock 变简单了
    
     *  继承了Jasmine优点，内置的断言
     *  强大的mock库支持
     *  理解了为何angular 项目使用jest进行mock了
 *  生成测试报告

jest --coverage 
    复制代码

### 总结 ###

我们了解E2E测试框架之间的区别；同时也了解了单元测试框架之间的区别。但是是不是把单元测试做好就行了？ 其实不然！ 有时候，单元测试不能保证集成测试没有问题，仅仅是某项功能ok，不保证集成到一起输入输出都是符合之前单元测试预期的。所以，不能一味的追求单元测试code coverage 100% 。但是单元测试做好，提前把错误找出来，有助于提升集成测试，减少问题定位成本。

**最后：** 下方这份完整的软件测试视频学习教程已经整理上传完成，朋友们如果需要可以自行免费领取**`【保证100%免费】`**

![在这里插入图片描述][9d205f76a3bb49d8bce29972548618fa.png_pic_center]

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！

![ea309a97fa574feeba0851be84cd3e93.gif][]

[format_png]: https://img-blog.csdnimg.cn/img_convert/12bbd54b15cbb1c46960eac559049211.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/c4e86f452641840b467c8142f5884512.webp?x-oss-process=image/format,png
[Jasmine]: https://link.juejin.cn?target=https%3A%2F%2Fjasmine.github.io%2Fpages%2Fgetting_started.html
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/bb9e6052d64e917851e6f5efe8d41c09.webp?x-oss-process=image/format,png
[9d205f76a3bb49d8bce29972548618fa.png_pic_center]: https://img-blog.csdnimg.cn/9d205f76a3bb49d8bce29972548618fa.png#pic_center
[ea309a97fa574feeba0851be84cd3e93.gif]: https://img-blog.csdnimg.cn/ea309a97fa574feeba0851be84cd3e93.gif