初识前端测试1

最近新加入的个学习小组,小组学习却是先从前端的JavaScript测试开始(我对前端测试感觉是个盲区)。最近也做了几个小练习,算是慢慢了解、学习有关前端测试的东西吧。下面谈谈我对测试的理解吧

image.png

什么是测试

为检测特定的目标是否符合标准而采用专用的工具或者方法进行验证,并最终得出特定的结果。

这里的特定目标就是指我们写的代码了,而工具呢就是我们需要用到的测试框架(库)、测试用例等。检测处的结果就是展示测试是否通过或者给出测试报告,这样才能方便问题的排查和后期的修正。

测试的意义

一个标准完整的项目,测试是非常有必要的。很多时候我们只是完成了项目而忽略了项目测试的部分,测试的意义主要在于下面几点:

  1. JavaScript 是动态语言,缺少类型检查,编译期间无法定位到错误; JavaScript 宿主的兼容性问题, 比如 DOM 操作在不同浏览器上的表现。
  2. TDD 被证明是有效的软件编写原则,它能覆盖更多的功能接口。
  3. 快速反馈你的功能输出,验证你的想法
  4. 保证代码重构的安全性,没有一成不变的代码,测试用例能给你多变的代码结构一个定心丸。
  5. 测试用例其实可以看成代码 API 使用文档,而且还是定时更新的,对 API 的使用者有很大的帮助
  6. 易于测试的代码,说明是一个好的设计。做单元测试之前,肯定要实例化一个东西,假如这个东西有很多依赖的话,这个测试构7. 造过程将会非常耗时,会影响你的测试效率,怎么办呢?要依赖分离,一个类尽量保证功能单一,比如视图与功能分离,这样的话,你的代码也便于维护和理解。

前端开发如何实现测试

前端测试主要还是基于NodeJS来实现,而现在也出现了一些测试框架。因此可以通过一些前端测试框架来实现,比如 mochamocha是JavaScript的一种单元测试框架。

当你确定选择测试框架之后,就需要熟悉这个框架的所提供的API。接下来就需要根据待检测的代码写相关的测试代码的。完成测试代码就可以用写好的测试代码来测试目标代码了。

下面通过mocha进行前端测试的步骤:

npm install mocha -g

当然也可以在不在全局安装,只安局部安装在项目中

npm install mocha --save
  • 创建一个测试文件 test.js
var assert = require('assert')

describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal(-1, [1, 2, 3].indexOf(-1))
    })
  })
})

这段文件和简单就是测试 Array 的一个 indexOf() 方法。这里我是用的断言库是 Node 所提供的 Assert 模块里的API。这里断言 -1 等于 数组 [1, 2, 3] 执行 indexOf(-1)后返回的值,如果测试通过则不会报错,如果有误就会报出错误。

下面我们使用全局安装的 mocha 来运行一下这个文件 mocha test.js
下面是返回结果

image.png

看到结果说明断言成功,代码运行的结果与我的预期相同,测试通过。这也就达到了测试测目的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 本篇文章是我在学习前端自动化单元测试时的一些思路整理,之前也从未接触过单元测试相关工具,如有错漏,请读者斧正...
    Awey阅读 12,732评论 8 37
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,089评论 25 709
  • 睡觉的鼻子一滴一滴的感觉有不明物体留下,半夜起来找纸很烦哎,影响睡眠!天干物燥!莫名其妙!
    熊与花阅读 355评论 0 0
  • 火龙果是款高营养、低能量的水果,富含植物性白蛋白和花青素以及水溶性膳食纤维。今天就做了火龙果蛋黄软饼,红火龙果的颜...
    小麦兜妈妈阅读 283评论 0 1
  • 照顾母亲,她是喜欢批评又变化无常的人,让我很难受,能让我保持和平的信念是: 1.因果。我曾经也批评别人,也变化无常...
    王燕军N21阅读 235评论 0 0