美文网首页
前端单元测试学习小结

前端单元测试学习小结

作者: 1ncounter | 来源:发表于2018-03-14 14:53 被阅读0次

测试开发应用方法
测试驱动开发(英语: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

总结

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

相关文章

  • 前端单元测试学习小结

    测试开发应用方法测试驱动开发(英语:Test-driven development,缩写为 TDD)是一种软件开发...

  • 工作总结(四):神奇的单元测试

    一、参考资料 1.单元测试好处 二、好处 三、开始学习 四、学习小结 五、能力测验

  • Android webview-tips

    webview优化 Android学习之 WebView使用小结 Android 各个版本WebView 移动前端...

  • 前端单元测试学习

    主要方案 karma+mocha(主要介绍) jest 工具介绍 Karma为前端自动化测试提供了跨浏览器能力 M...

  • 【目录-学习笔记】

    学习IOS开发的目的是前端时间我司研发总监要求测试做单元测试,很不幸被抽中做IOS单元测试,当是并不是那么反对,技...

  • 前端学习小结(1)

    作为一个大四将要毕业的学生,最近一直忙于各种面试题的总结,看到了一条比较有趣的面试题想和大家分享一下个人的心得,如...

  • 前端学习路径小结

    其实想写这样一篇关于前端学习历程的文章已经好久了,之前自己也有做一些总结和笔记之类的,但是一直都没有公开发布,下面...

  • 前端单元测试(一) - 入门向

    目录 概述为何要写测试前端测试的类型TDD vs BDD 常用前端单元测试框架JestMocha More前端测试...

  • 前端单元测试到底测什么?

    前端单元测试到底测什么?单元测试[http://yun.itheima.com/course/437.html?2...

  • 单元测试之断言

    单元测试之断言 作为前端开发,很少去自己写单元测试。对于单元测试的了解也很少,自学了一点关于单元测试断言的知识,有...

网友评论

      本文标题:前端单元测试学习小结

      本文链接:https://www.haomeiwen.com/subject/auzzfftx.html