前端测试

写在前面

随着学习的深入和工作的需要，日常写代码要开始兼顾到代码测试的编写了。最近接触到的测试有两种，一个是单元测试，用的是 Jest 工具。另外一个是端到端测试，用的是 Cypress 工具。Cypress 也可以用来做单元测试。但用过了 Jest 发现，测试工具的用法大同小异。尽管各种语法不同，其测试原理都是一样的，每一类会用一个，其他各种各种的测试工具也都可以举一反三很快地上手了。那么问题来了，测试到底是什么，有哪些分类呢？

什么是测试

我们常说的测试其实指的是代码测试，在软件工程领域，学名就是软件测试。软件测试在维基百科的解释是：在规定的条件下对程序进行操作，以发现程序错误，衡量软件质量，并对其是否能满足设计要求进行评估的过程。简单来说就是你根据某个需求实现了一段代码，怎么知道你实现的这段代码是不是对的，是否完全满足需求了，是不是覆盖所有的范围了？

比如有这样一个求绝对值的功能实现，你写了一段代码，你说你实现的是对的，那怎么证明你实现的是对的呢？好，此时一个人要求传入 5 求绝对值试试，得到的的确是 5，另外一个人要求传入 -5 试试，得到的的确是 5，又有人说传入 0 试试，得到地的确是 0。这个提问和证明的过程就是测试。提问对应的就是需求，证明对应的就是测试。只有一个软件正确地实现了需求的各种要求才是可靠可行的软件。

总结成一句话其实就是，测试是验证代码的可行性和可靠性的必要过程。

测试分类

以下说是测试分类，其实按照维基百科严格来说是测试的过程。全部的分类涉及软件工程领域的专业知识，暂时不细体。以下只介绍前端测试常用的分类。前端测试，即 JavaScript 代码测试的分类。

测试根据方式其实是有人工测试和自动化测试之分的，人工测试顾名思义就是需要人去手动查看代码和功能效果去找 bug，依赖的是人力。自动化测试就是借助测试工具自动地去测试各种效果和 bug。随着各种自动化测试工具的出现，人工测试早就被淘汰了，现在基本都是自动化测试。

1. 单元测试

单元测试是以最小范围的代码块为一个单元进行测试，是所有测试类型中最基本的，细粒度最精确的测试。通常指的是独立测试单个函数，有时也可以是单个类，单个模块，单个组件。

单元测试有一个最大的特点就是不能依赖于任何的外部资源，比如网络和数据库。

单元测试通常是用来测试单个函数的功能实现是否是正确的，不能受外部因素的影响。比如，针对一个登录功能函数的单元测试，该函数的作用是收集传入的数据，向后台服务发送请求传递数据。进行单元测试的时候，不能因为网络的原因导致没有接收成功就判断说该函数测试没有通过。该函数只要收集了数据，向后台发送了请求就证明该函数功能是正确的。因此在单元测试的过程中，要对函数里的外部因素进行控制，通常是用 mock 的方式来保证外部因素的可靠性。这样测试出来的结果才是仅仅针对该函数的单元测试。

自动化测试工具

• Jest
• Cypress
• Mocha
• Jasmine
• Karma

2. 集成测试

若单元测试被称为一个人的能力测试，那集成测试就是一个团队多人配合能力的测试了。

集成测试是测试两个或多个独立的函数或模块集成到一块实现的某个整体功能的测试。相当于是集成了多个单元测试构成一个新的测试。像上面的例子，如果是做集成测试的话，登录功能函数就需要依赖后台服务，需要真正地发送请求到服务器，服务器要正确地处理正确地返回给登录功能函数正确登录才算集成测试通过了。这里测试的就是，应用不仅要正确地发送请求，服务端的处理程序也要正确地接收到并处理，二者同时通过才算是集成测试通过。

3. 功能测试（E2E测试、端到端测试 、浏览器测试）

功能测试其实是站在用户角度的测试。不关心代码是哪几个模块的结合实现，只关心在页面进行一些操作是否得到了期望的功能效果。功能测试需要模拟真实用户进行网页交互，测试产品的功能。比如一个页面提供了搜索功能，那么需要模拟用户做的就是找到那个搜索框，在里面输入数据，看是否会出来匹配的选项列表。

自动化测试工具

• Cypress

4. UI 测试

UI 测试是对用户界面的测试，主要就是拿待测网页的样式和设计稿进行对比，即测试视觉效果是否满足设计稿。

几个概念

TDD

TDD 全称为 Test-Driven Development（测试驱动开发）
测试驱动开发就是指在实现某个功能的具体代码前先写好测试代码，然后写让测试代码通过的代码实现功能。是先有测试代码后有功能代码的一种开发方式，即通过测试来推动整个开发的进行。

BDD

BDD 全程为 Behavior-Driven Development（行为驱动开发）