前端单元测试及其工具介绍（一）

前端单元测试及其工具介绍

本篇只是对单元测试可能用到的一些工具进行介绍和例举，具体的vue项目测试环境搭建和测试用例编写，请查看我的其他几篇文章。

• 前端vue单元测试环境搭建（二）
• vue项目单元测试编写-mocha（三）
• vue项目单元测试编写-chai（四）

为什么需要单元测试

• 测试肯定是为了减少bug，这没什么好说的。而且测试写好了，减少你的工作量，及时发现问题，定位问题，提高效率，保证质量。最好是一开始编写组件之前，就编写好测试用例，这样，在编写测试用例时，你在脑海中就就可以将组件的雏形构建出来，这样编写组件时就会有很清晰的思路，事半功倍。

• 前端项目的单元测试不是必须的，特别是业务型项目，增加单元测试反而会成为累赘，增加开发成本且无意义，业务型的项目需求常常变动，UI也经常更改，增加单元测试，需要在开发过程中不断更新开发测试用例，增加开发成本。但是，项目中的一些公共封装，比如公共的组件、公用的功能模块等是可以使用单元测试的。参考：https://www.javascriptcn.com/read-51682.html

单元测试的一些要素

• 测试框架
• 测试报表
• 测试覆盖率
• 断言
• mock

测试框架提供测试语法以及单元测试代码的编写，断言和mock提供单元测试编写的辅助工具，可以更方便快捷的编写你的测试用例，而测试报表和测试覆盖率是为了检验你的测试是否通过和测试是否有效的工具。

工具

mocha

介绍

一款js测试框架，主要优点是灵活，可扩展性强。但只提供简单的测试结构，如果需要assert断言，mock等，需要添加第三方库。mocha必须在全局环境中安装，你局部也要安装。

只要程序抛出一个错误，mocha就会认为测试不通过，事实上，只要不抛出错误，测试用例就算通过

API

他只提供了如下两个API

• describe(name, fn) 定义一组测试

• it(name, fn) 定义一项测试

// 
// 定义一组测试
describe('test', () => {
   
   
    // 定义一项测试
    it('testName', () => {
   
   
        // 测试内容
    })
})

上面代码中，一个测试文件包含多个describe块，describe表示定义一组测试，而it则是最小的测试单元，定义一个测试用例。describe可以嵌套describe，一个describe可以包含多个it。你可以根据describe划分业务模块和功能模块的测试，然后里面包含一组组的测试用例。

钩子函数

一个describe中包含了一组钩子函数，他会在测试执行的不同时期执行

• before()：在该区块的所有测试用例之前执行

• after()：在该区块的所有测试用例之后执行

• beforeEach()：在每个单元测试(即it)