前端-单元测试

前端单元测试

1、什么是单元测试？

每个单元测试就是一段用于测试一个模块或接口是否能达到预期结果的代码

前端测试类型：单元测试和E2E测试(cypress)

在项目中引入了工程化、模块化的概念，这和数年前前端极度依赖后端渲染以及切图工作产生了极大的进步，当然这些进步也使得我们的项目变得更加复杂庞大，每个工程的复杂化、代码的高复用性要求和前端代码模块之间的高内聚低耦合的需求，前端工程中的单元测试流程就显得很有其必要。
我们需要明确单元测试存在的必要性，这项技术是为了使得我们不仅仅可以通过自定义的测试用例来测试我们已经写好的功能，更加长久持续的意义在于我们在组件中增删改操作后可以保证我们原先被测试覆盖到的功能可以不受影响，这更有利于降低测试人员的压力，提高测试的效率，可以避免在项目迭代后需要测试人员重新重复测试前几个版本反复测试过的功能。并且在项目复杂度过高后，”人肉测试“这种方式更加容易出现疏漏，漏测一些必要的功能或细节。

2、单元测试的目的？

确认某段代码或模块或接口是否适合使用，而是更高效更稳定的确认其是否可用。

3、简单的单元测试

写一个demo来测试该段代码的可行性

缺点：不能共享测试结果、具有单一性（每次只能执行一个）

4、前端测试工具

• 测试工具
  基本安装以及使用方式见官方文档

  • jasmine
    https://jasmine.github.io/

  • jest
    https://jestjs.io/

  • qunit
    https://qunitjs.com/

• 测试框架
  在单元测试中我们无法避免的需要对DOM进行抓取，或者对组件进行挂载，触发DOM的事件等。原生的querySelector以及event会显得非常的麻烦。
  Vue-test-utils是Vue的官方的单元测试框架，它提供了一系列非常方便的工具，使我们更加轻松的为Vue构建的应用来编写单元测试。主流的 JavaScript 测试运行器有很多，但 Vue Test Utils 都能够支持。它是测试运行器无关的。
  我认为可以这样理解，Vue-test-utils在Vue和Jest之前提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试。

5、Vue官方单元测试

1. 优点：
   可以更方便地更改和监听组件本身的props和data（或state）来确定数据的流动和更改，保证整个流程中数据的正确性，并且在异步这类操作的机制下，可以通过单元测试更好地判断各时间点数据是否达到预期。

2. 安装：
   git clone https://github.com/vuejs/vue-test-utils-getting-started
   cd vue-test-utils-getting-started
   npm install

3. 测试键盘鼠标等其他dom事件

4. 测试组件中的vuex

5. 利用jest测试单文件组件：
   npm 安装： npm install jest -D/-g
   运行：本地安装：npx jest 全局安装： jest

6. 在编写测试用例时从公共组件优先考虑，这部分组件变动不大且涉及范围更广泛，优先保证这部分组件的正常运行对于项目而言是基石般的重要，且因为公共组件通常不会因为业务或是界面的改动而产生大范围的重构，所以测试用例通常也不会需要重写或是废弃的情况。目前大部分的团队编写测试用例是只考虑面向公共组件的，这样可以把成本压缩到最低并且可以保证不错的收益。

7. 生成测试报告
   测试覆盖率 Istanbul
   在测试中总是免不了测试覆盖率报告量化我们的测试用例所覆盖的代码范围，当然这只是一个参考性的作用，但绝不是可以忽视的一环。我们可以通过这个报告客观地看我们哪些代码被覆盖被运行而哪些没有，也可以通过标注看代码被调用地次数来判断是否符合预期。

8. 生成测试报告
   jest --coverage

9. 项目目录：
   

10. git地址：
    https://github.com/haohongyang1/unit-test-learn