前端单元测试学习小结

测试开发应用方法
测试驱动开发（英语：Test-driven development，缩写为 TDD）是一种软件开发过程中的应用方法，由极限编程中倡导，以其倡导先写测试程序，然后编码实现其功能得名。
BDD行为驱动开发，即Behaviour Driven Development，是一种新的敏捷开发方法。它更趋向于需求，需要共同利益者的参与，强调用户故事（User Story）和行为。

关于前端测试：

https://zhuanlan.zhihu.com/p/19590189
https://zhuanlan.zhihu.com/p/26050231

知乎：如何进行前端自动化测试？https://www.zhihu.com/question/29922082

• 前端是一种特殊的GUI软件
• API unit测试方法论在测试GUI时并不能解决所有问题。
• 在前端很大部分代码中，前端测试应该向传统GUI测试方法论需求解决方案。百度百科：https://baike.baidu.com/item/GUI%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95
• GUI测试的成本非常高，前端这种特殊的GUI软件，具有天生的快速迭代特征，这使得case维护成本也变得非常高，经常跟不上迭代速度。
• 一个标准的互联网应用产品的前端部分，粗略估计大概有20%的业务基础代码比较稳定，比如通用组件、通用算法和数据模块等，可以针对这些建立复杂一些的API和GUI测试用例来保证质量。

所以一般情况下，前端测试分为单元测试和ui测试。

关于测试的一些知识点梳理：

单元测试：一段代码（通常一个方法）调用另一段代码，随后检验一些假设的正确性，如果假设的结果错了，单元测试注定会失败，一个”单元“指的的一个方法或函数。

测试用例: 测试用例（Test Case）是为某个特殊目标而编制的一组测试输入、执行条件以及预期结果，以便测试某个程序路径或核实是否满足某个特定需求。

测试套件: 通常把一组相关的测试称为一个测试套件（test suite）。通过测试套件，将服务于同一个测试目的或同一运行环境下的一系列测试用例有机的组合起来。测试套件是按照测试计划所定义的各个阶段的测试目标决定的，即先有测试计划，后面才有测试套件。

单元测试知识点参考：
https://zhuanlan.zhihu.com/p/27144800
https://zhuanlan.zhihu.com/p/27159015

Mocha

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on GitHub.

教程
* 官方文档 https://mochajs.org/
* 阮一峰mocha教程 http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
* CNode https://cnodejs.org/topic/59e3873520a1a3647d72ac39
* 个人翻译中文文档 https://segmentfault.com/a/1190000011362879

命名： 测试脚本与所要测试的源码脚本同名，但是后缀名为.test.js（表示测试）或者.spec.js（表示规格）。比如，add.js的测试脚本名字就是add.test.js

本身mocha是不包含断言库的，所以必须引入第三方断言库，目前比较受欢迎的断言库 有 should.js、expect.js 、chai，具体的语法规则需要大家去查阅相关文档。

chai

断言库可以理解为比较函数，也就是断言函数是否和预期一致，如果一致则表示测试通过，如果不一致表示测试黑失败，一个unit test里面可以包含多个断言语句。

教程
* 官方文档 http://www.chaijs.com/
* 中文api http://www.jianshu.com/p/f200a75a15d2

karma

The main purpose of Karma is to make your test-driven development easy, fast, and fun.

* github https://github.com/karma-runner/karma
* karma介绍 http://taobaofed.org/blog/2016/01/08/karma-origin/

单元测试

结合我们目前的技术栈，本文主要介绍React和vue的单元测试。

React 单元测试

React的测试方法主要为将其中的计算逻辑抽离出来形成单元，再进行测试。
测试模块应该尽量使你的应用逻辑上保持独立——模块不依赖于 I/O 和 UI。

对于 Web 应用来讲，I/O 是什么？没有文件和数据库的操作？其实不仅仅是这样，还有 Ajax 调用，本地存储，DOM 操作等，对我而言，任何和浏览器 API 有关的都是 I/O 操作。
参考： https://zhuanlan.zhihu.com/p/26266010

重要的是模块的设计，它暴露出来的函数非常简单——给一个 state，得到下一个 state。

在Redux中 每一个reducer都相当于一个模块，而且以Redux为状态管理的React应用当中，reducer几乎包括了我们所有前端业务的核心，它们全都是(State, Action) => nextState形式的纯函数。所以测好它就测了大半。

而在View层应用当中，我们一般只进行stateless component的测试。

详细请见： http://insights.thoughtworks.cn/react-and-unit-testing/

Vue 单元测试

在vue-cli生成项目之时选择需要unit测试，并选择karma mocha，项目�中就已经有了test文件夹，其中基于的unit有了一定配置文件以及一个Hello World例子。

具体使用以及例子详情参考：

官方用例：
https://cn.vuejs.org/v2/guide/unit-testing.html
https://github.com/vuejs/vue-test-utils-mocha-webpack-example

论坛文章：
https://zhuanlan.zhihu.com/p/26752090
https://www.zhihu.com/question/50566681/answer/267276949
https://zhuanlan.zhihu.com/p/27962486

使用建议：
https://engineering.doximity.com/articles/five-traps-to-avoid-while-unit-testing-vue-js

nodejs 测试

https://zhuanlan.zhihu.com/p/27986118
https://my.oschina.net/wangshijun/blog/871947

总结

任何测试都是针对项目减少错误率，从而保证项目的效率以及可用性，所以在写测试用例的时候更应该结合项目现有需求而进行。