打造前端工程测试体系(1)

作者:helinjiang

我们即将讨论的是如何在前端项目中引入自动化测试。虽然文章聚焦的是前端项目,但实际上讨论的内容也适合 Node 端应用。

这是本系列文章的第一章,主要内容是对前端自动化测试有一个初步的了解。适合入门学习。

1. 引入自动化测试的必要性

好处很多,包括减少错误、提高效率等,尤其是前端项目越来越庞大且多人维护时,前端自动化测试就会显得尤其重要。

代价也有,毕竟需要额外的学习成本。但在你的项目中加入测试,也许没你想象的那么困难。

2. BDD vs TDD

说起测试,需要先说一下主流的测试类型,包括 BDD 和 TDD,有点枯燥,但有必要有个简单的了解,因为会影响选择如何测试的策略。

  • TDD(Testing Driven Developement,测试驱动开发),强调的是一种开发方式,以测试来驱动整个项目,即先根据接口完成测试编写,然后在完成功能时要不断通过测试,最终目的是通过所有测试。
  • BDD(Bebavior Driven Developement,行为驱动测试),强调的是写测试的风格,即测试要写得像自然语言,让项目的各个成员甚至产品都能看懂测试,甚至编写测试。

BDD 和 TDD 均有各自的适用场景,BDD 一般更偏向于系统功能和业务逻辑的自动化测试设计,而 TDD 在快速开发并测试功能模块的过程中则更加高效,以快速完成开发为目的。

很容易在网络上找到很多这两者比对,比如:

3. JavaScript 测试框架 Mocha

本文以 Mocha 为例,它是现在最流行的 JavaScript 测试框架(JavaScript test framework)之一。当然你也可以使用 JasmineQUnit 等。

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.

所谓"测试框架",就是运行测试的工具。通过它,可以为 JavaScript 应用添加测试,从而保证代码的质量。

将 Mocha 安装在项目中:

$ npm install mocha --save-dev

但为了操作的方便,请在全局中也安装一下 Mocha:

$ npm install mocha -g 

4. 断言库 Chai

断言库(assertion library)是用来写断言的库。

维基百科的 断言(程序)一文是这么解释断言的:在程序设计中,断言assertion)是一种放在程序中的一阶逻辑(如一个结果为真或是假的逻辑判断式),目的是为了标示与验证程序开发者预期的结果-当程序运行到断言的位置时,对应的断言应该为真。若断言不为真时,程序会中止运行,并给出错误消息。

根据风格,断言库又区分为 TDD 风格 和 BDD 风格。Chai Assertion Library 便是其中一个著名的代表,它同时支持这两种风格。

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

将 Chai 安装在项目中:

$ npm install chai --save-dev

5. 编写测试脚本

我们先梳理下 Mocha、Chai 和测试脚本之间的关系,如果不能够理解清楚,则后续的讲解会比较懵。

  • Mocha 只是个测试框架,它的作用是运行测试脚本。它不负责具体的测试。
  • Chai 只是一个断言库,它的作用是用来在测试脚本中编写断言。
  • 测试脚本(文件)就像我们正常的编写js模块一样,只不过测试框架提供了额外的全局方法和变量,比如 describeit等,如果不用测试框架来启动,则它是没法运行的。就好比 window 对象是浏览器提供的,只能用浏览器来启动,不能够用 node 启动。
  • 测试脚本中,断言库提供了一些语法支持,用来做判断的标准,比如你想测试某个变量 a 应该为字符串,你只需类似这么写 expect(a).to.be.a('string'); 即可,其他的交给 Mocha + Chai,因为它们会正确的处理:如果为真则通过,如果为假则报错。
  • 有些测试框架会自带断言库,但 Mocha 没有,Chai 作为单独的断言库,功能很强大,这两者是黄金搭档。

接下来我们将以一个简单的加法模块为例来说明。完整的代码可以 查看此处

5.1 新建源码文件

我们新建一个源码文件,命名为 add.js,文件内容如下:

function add(x, y) {
    return x + y;
}

module.exports = add;

5.2 新建测试文件

我们新建一个测试文件,命名为 add.test.js,文件内容如下:

通常,测试脚本与所要测试的源码脚本同名,但是后缀名为.test.js(表示测试)或者.spec.js(表示规格)。

var add = require('./add.js');
var expect = require('chai').expect;

describe('加法函数的测试', function () {
    it('1 加 1 应该等于 2', function () {
        expect(add(1, 1)).to.be.equal(2);
    });
});

测试脚本里面应该包括一个或多个 describe 块,每个 describe 块应该包括一个或多个 it 块。 describe 块也可以包括 describe 块。

  • describe 块称为"测试套件"(test suite),表示一组相关的测试。
  • it 块称为"测试用例"(test case),表示一个单独的测试,是测试的最小单位。

上面的 expect(add(1, 1)).to.be.equal(2); 就是一个断言,此处我们选择的是 Chai 的 expect 接口(interface)方式,它是 BDD 风格(BDD style)。其详细的 API 接口说明可以 查看这里

5.3 运行测试命令

在当前目录下,执行以下命令:

mocha add.test.js

运行结果如下,可以看到测试脚本同构了测试,一共只有 1 个测试用例,耗时是 8 毫秒。

 mocha 命令后面紧跟测试脚本的路径和文件名,可以指定多个测试脚本。例如: mocha file1 file2 file3

6. 总结

本文仅作为入门介绍了前端测试的基础知识,并且以 Mocha + Chai 为例,编写了相当简单的测试用例。

但这个用例太简单,太理想化了。真实的项目环境中,还有很多问题都需要解决,比如:

  • 如何用 es6 语法来写测试用例?
  • 如果代码中有 DOM 操作怎么测试?
  • 如何在不同浏览器中进行测试?
  • 使用 React 等框架时怎么测试?
  • 依赖 Ajax 等场景时如何测试?
  • ...

这些实际的情况,我们会在接下来的文章中继续讨论。但至少根据这一章节的内容,你已经可以去写一些纯函数的测试用例了,比如传入一个时间戳然后输出自定义格式的时间或日期。

赶紧试试吧!

原文链接:http://ivweb.io/topic/58b693d09a11ad7225d43629

相关推荐

概览:可视化前端测试

前端识别验证码思路分析

新用户秒杀——域名折上折,限量抢购

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小筱月

博客首页加载的优化

从刚做好这个博客不就第一次就发现了,发起 ajax 请求时,可以看到 content-download 的时间居然比 waiting 的时间还长,而且首页等待时...

525
来自专栏携程技术中心

干货 | Tomcat类加载机制触发的Too many open files问题分析

作者简介 宋顺,携程框架研发部技术专家。2016年初加入携程,主要负责中间件产品的相关研发工作。毕业于复旦大学软件工程系,曾就职于大众点评,担任后台系统技术负责...

2836
来自专栏张戈的专栏

nginx配置文件参数详解

这年头原创技术博文真心难写,不可能每天都有灵感,也不可能每天都出问题。而且技术教程也非常全面,不管是百度一下,你就知道,还是谷歌一把,你就找到,基本要啥有啥,只...

3206
来自专栏大前端开发

如何为你的微信小程序瘦身?

众所周知,微信小程序在发布的时候,对提交的代码有1M大小的限制!所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及这个底线...

825
来自专栏Golang语言社区

使用 Go 语言完成 HTTP 文件上传与下载

最近我使用 Go 语言完成了一个正式的 web 应用,有一些方面的问题在使用 Go 开发 web 应用过程中比较重要。过去,我将 web 开发作为一项职业并且把...

58611
来自专栏hotqin888的专栏

HydroCMS规范、图集查询系统设计

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1002
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 性能优化之可取消的异步操作

React Native 性能优化之可取消的异步操作 本文出自《React Native 研究与实践》系列文章。 概述 在项目开发中离不了的需要进行一些异步操作...

3285
来自专栏一枝花算不算浪漫

[开发工具]Java开发常用的在线工具

3439
来自专栏智能大石头

微软的软件授权及保护服务(SLPS)试用分析

这些天都在绞尽脑汁地想怎么样设计一个授权方式来保护我的组件,今天看了一下同事从广州带回来的Tech2007的讲稿,里面提到了 微软的软件授权及保护服务(SLPS...

1988
来自专栏Android工程师的修仙之旅

【小程序+云开发】实战:一天搭建小型论坛

笔者最近涉猎了小程序相关的知识,于是利用周末时间开发了一款类似于同事的小程序,深度体验了小程序云开发模式提供的云函数、数据库、存储三大能力。关于云开发,可参考文...

2745

扫码关注云+社区