如何做好前端单元测试？字节5年测试老司机是这样说的！
近几年，前端发展越来越迅猛，各类框架层出不穷，前端实现的业务逻辑也越来越复杂，前端单元测试也越来越受重视，包括百度在内的一些大厂在面试中也会问到单元测试相关的题目。那么前端应该如何做好单元测试？
什么是单测
单测的定义
来自维基百科的定义：
在计算机编程中， 单元测试（Unit Testing）又称为 模块测试，是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。
程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类（超类）、抽象类、或者派生类（子类）中的方法。
定义里面指出，单元测试针对的是程序的最小单元，因此我们应该针对最小单元来写单测。
单测完善程度的衡量
单测完善程度的衡量用覆盖率来衡量
关于测试覆盖率，我们大致了解下以下几个常见的计算维度：
- 行覆盖率：可执行语句执行的比例
- 函数覆盖率：函数被调用的比例
- 分支覆盖率：判断语句分支被执行的比例
来看下面这个例子：
对于测试用例 foo(4)，分支覆盖率只有50%，原因是 foo(4) 只测试了if 为 true 的情况，没有测试到 if 为 false 的情况。
如果想要分支覆盖率达到100%，还应该测试 foo(5)。
为什么需要单测
现状与问题
- 缺乏意识：没有单测意识，很多代码没有单测
- 缺乏设计：模块缺乏设计，相互耦合，写单测困难
- 测试困难：升级公共 API，人工测试验证困难
- 测试不全面：部分代码分支众多，人工测试没办法覆盖所有分支
单测的价值与意义
- 能力建设：一个具备开发经验的开发人员，基本上都会编写单元测试。即便不会，可以通过培训来快速达成。从学习曲线上看，单元测试很容易上手。
- 提升效率：能够通过 mock 数据，及早发现问题，而越早发现Bug，造成的浪费就会越小。
- 追求卓越：单元测试可以充当一个设计工具，它有助于开发人员去思考代码结构的设计，让代码更加有利于测试。
- 测试更全面：能够覆盖 QA 测试覆盖不到的情况，比如各种 if 分支、异常处理。
- 更有信心：升级公共 API 时，如果依赖这个 API 的所有代码单测都能通过，那我们对这次代码升级是更有信心的。
现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：110685036【暗号：csdn999】
怎样写单测
单测的原则：FIRST
单测需要测什么：RIGHT BICEP
结果正确
这个是最基本的检查，如果单测的运行结果都不正确，那其他的都免谈。
边界条件检查
边界检查尤为重要，很多错误都是发生在边界上。边界检查遵循 CORRECT
- 有序性：如果一组值是有序的，那么在向其中删除或者添加时，需要校验这组值是否仍然是有序的
- 引用/耦合性：对于类的状态、其他对象的状态等需要做一些假设，程序员就需要对代码进行测试，保证在假设未满足的情况下运行良好。
- 存在性：当数据不存在的时候，程序是否运行良好，例如null，空字符串等
- 基数性：这里的基数主要强调的是计数，考虑以“0-1-N 原则”，当数值分别为0、1、N 时，可能出现的结果，其中N 为最大值。
- 时间性：要充分考虑与时间相关的问题，涉及到并发、异步、超时等这些情况需要特别注意，所有事情的发生时间是否在预期范围内。
反向关联检查
- 例：对于加密算法，使用解密算法反向检查其输出，验证解密后明文是否正确。
- 例：对于写操作API，使用读操作API来反向检查验证
交叉检查
- 例： 对性能优化的算法，使用性能差但验证过的算法交叉检查
强制错误条件发生
- 例： Mock依赖系统不可用 或者 Mock系统时间错误
- 例：甚至可以直接throw error，来验证程序对错误的处理
满足性能要求
当某个程序升级的时候，是否会对性能造成影响？这需要我们对程序的性能进行测试
写单测的时机
写单测的时机主要有以下三种，大家可以根据自己的实际情况来进行选择。
具体实现代码之前
即测试驱动开发（TDD）：编写某个功能的代码之前先编写测试代码，然后编写使测试通过的功能代码，重复这个过程，通过测试来推动整个开发的进行。
特点：UT 能够更好的实践我们的代码设计。对于某些复杂度较高的接口（甚至是一些私有方法），建议使用 TDD 进行开发。
与具体实现代码同步进行
先写少量功能代码，紧接着写单元测试（重复这两个过程，直到完成功能代码开发）。
特点：每个单测比较简单易懂，可读性可维护性都比较好（重构时单测的改动不大）。
编写完功能代码后
这种单元测试“粒度”会比较粗。对同样的功能代码，采取前两种方案的结果可能是用10个“小”的单测来覆盖，而这种方案写的单测，往往是用1个“大”的单测来覆盖。
特点：逻辑就比较复杂，因为它要测的东西很多，可读性可维护性可能会比较差。
单测的思路
测试工具的分类
在我们开始选择单测工具之前，需要先了解测试工具的几种分类：
- Test runner
- Test framework
- Assertion library
- Testing Plugins
通常需要这几种类别的工具组合一起使用来完成测试，也有测试框架集成了这几类工具，如 Jest，做到开箱即用。
Test runner
测试运行器，只负责找出代码中所有的单元测试用例，然后启动运行它们，最终获取测试结果。并不关心那些测试用例到底是用什么语言编写的，以及我们究竟采用的是什么框架，它所做的仅仅是运行这些测试而已。
Karma是 Test runner
Test framework
测试框架，它定义了测试用例的语法和API，以及如何为这些用例编写断言。
Jasmine Mocha和Jest 是 Test framework
Testing Plugins
测试插件如Sinon，使我们能够执行更多不同的测试，如mock、stubs、 fake servers等。
Assertion library
断言指的是一些布尔表达式，在程序中的某个特定点该表达式值为真，判断代码的实际执行结果与预期结果是否一致，而断言库则是讲常用的方法封装起来。
常用断言库主要有：
- assert (TDD) node自带
assert("mike" == user.name);- expect.js（BDD） expect 风格的断言
expect(foo).to.be("aa");- should.js（BDD）should 风格的断言
foo.should.be("aa"); - chai（BDD/TDD） - 集成了expect()、assert()和 should 风格的断言
测试框架的选择
以下介绍几种目前流行的测试工具供大家参考，主要有：
- Jest
- Mocha
- Jasmine
- AVA
- Tape
Jest
Jest是目前最流行的框架之一，是Facebook团队构建和维护的JavaScript测试框架，基于 Jasmine，至今已经做了大量修改添加了很多特性。
主要有以下优点：
- 开箱即用配置少，API简单
- 支持断言和仿真
- 支持快照测试
- 在隔离环境下测试
- 优雅的测试覆盖率报告
- 良好的官网文档
Mocha
Mocha是目前使用最多的js测试框架，同时支持前端和后端测试。可以在node.js和浏览器中运行，使异步测试变的简单而有趣。Mocha测试按串行运行，将未捕获的异常映射到正确的测试用例上，从而可以灵活、准确地报告。
主要优点包括：
- 适用于前端和后端
- 支持NodeJS调试器
- 支持任何浏览器
- 支持Object Mock
- 社区成熟用的人多，测试各种东西社区都有示例
但是mocha不提供断言，需要引入断言库，断言库可以选择 chai sinon
Jasmine
Jasmine可以模仿用户行为，Jasmine可用于测试前端的可见性，单击清晰度以及不同分辨率下的UI响应速度。 Jasmine允许通过延迟和等待时间来自动化用户行为，以模拟实际的用户行为。
主要优点有：
- 几乎为0的外部依赖，适用于网站、Node.js项目或任何JavaScript可以运行的地方
- 开箱即用(支持断言和仿真)，API简单
- 支持前端和后端测试
AVA
AVA是一种极简的轻量级测试框架，它利用了Javascript的异步特性，可以并发运行测试。它主要专注于针对基于NodeJS的代码运行测试。
主要优点包括：
- 体积小，运行速度快
- 异步并发运行测试
- 比大多数其他测试框架更快
- 简单语法
- 干净的堆栈跟踪，使得可以检测到任何潜在的错误
Tape
Tape 架构上与AVA非常相似，它不支持全局变量，因此需要在每个测试文件中require Tape。
主要优点为：
- 体积最小，只提供最关键的东西
- 只提供最底层的 API，为开发人员编写测试用例提供完全的自由
- 支持ES6，Typescript和coffee脚本标准
- 支持大多数现代浏览器上的测试执行
选择哪种测试框架不是非黑即白的，每种测试框架都有各自的优缺点，选择哪种框架可以根据项目实际情况及个人习惯来定。
个人更倾向于 Jest，因为它容易上手，开箱即用，功能全面，官方文档很详细，对于新手来说使用成本很低。
END今天的分享就到此结束了！点赞关注不迷路~