前端单元测试学习记录

111 阅读5分钟
本文是对本周单元测试学习和使用的记录,测试工具主要使用到了node内置的assert模块,should.js断言库,mocha测试框架,karma, Travis CI。
mocha是现在最流行的JavaScript测试框架之一,在浏览器和Node环境都可以使用。
所谓"测试框架",就是运行测试的工具。通过它,可以为JavaScript应用添加测试,从而保证代码的质量。
karma是用于在主流浏览器中做测试的一个管理工具,它可以监控文件的变化,然后自行执行,通过浏览器控制台显示测试结果。
Travis CI是一套在线的持续集成服务,简单的说就是它能与github这种代码管理仓库关联(实际上官方只支持github,当然你也可以自己搭建一套方案),一旦检测到有新的提交,travis就会自动测试代码并更新测试结果,然后自动部署到服务器。


assert模块无需安装,直接require后使用,关于assert的学习可以参考阮一峰老师的教程assert模块,以下为使用mocha测试的第一个例子

首先全局安装一下mocha:

npm install mocha -g

项目的目录结构:


package.json运行脚本:

"scripts": {    
    "test": "mocha"  
}
var assert = require('assert');// 每个describe()块可以看做一组测试,可以把相关联的测试放在同一个describe块内,第一个参数是该组测试的名称,第二个参数是实际执行测试的函数。describe可以嵌套;
// 每个it()块包含一个测试用例,是最小的测试单位,测试用例的功能应尽量单一化
describe('Array', function() {  
    describe('#indexOf()', function() {    
        it('should return -1 when the value is not present', function() {      
            assert.equal(-1, [1, 2, 3].indexOf(4)); // assert.equal()测试实际值和预期值是否相等。第一个参数为实际值,第二个为预期值,如果实际值和预期的值相等,则测试通过。    
        })  
    })
})

这里mocha是全局安装的,直接执行mocha或者 npm run test测试结果如下:


这个例子的详细代码见github,另外还有assert.deepEqual()assert.throws()的使用。

接下来第二个例子引入should.js断言库,并接通Travis CI,demo地址

安装should.js并引入

npm i should --save

travis不需要安装,只需要添加一个.yml的配置文件,如下:

language: node_js //说明语言环境
node_js: // 可使用的node版本  
- "8"  
- "10"
before_install: //执行测试前需要先安装mocha  
- npm install -g mocha

travis详细配置可参考这里。travis的使用可以看阮一峰老师的教程

test.js

var add = require('../lib/add');
var should = require('should');
describe('大数相加add方法', function () {  
it('字符串"42329"加上字符串"21532"等于"63861"', function () {    
    add('42329', '21532')      
    .should.equal('63861')  // 这里表示调用add('42329', '21532')函数的结果应该等于'63861'.
      // should.js 提供的api都很语义化,使用简单  })    
it('"843529812342341234"加上"236124361425345435"等于"1079654173767686669"', function () {    
    add('843529812342341234', '236124361425345435')      
    .should.equal('1079654173767686669')  })
})

执行npm run test得到的测试结果:

注意这里将mocha改为本地安装了,因为如果mocha是全局安装,在mocha.opts引入should模块时会找不到,这是因为如果mocha是全局的,在配置文件中查找依赖时,也会默认从全局查找,而这里should是本地安装,便会出现can't find module should的错误。为了尽量减少插件的全局安装,统一将mocha和should都在本地安装,这样就需要修改一下执行的命令:

"scripts": {    
    "test": "node ./node_modules/mocha/bin/_mocha"  
}


Travis测试通过后,对应项目会出现如下标志:


一旦项目有新的提交,travis都会自动执行测试并更新测试结果。

第三个例子加入karma,在浏览器内进行测试:

karma安装(全局安装一下方便使用):

npm i karma-cli -g

然后在项目目录内进行本地安装:

npm i karma --save-dev

项目初始化完成后进行karma初始化,添加karma的配置文件(执行karma init),选择自己需要的选项:

// 选择测试框架
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> mocha
// 是否安装require.js
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no // 选择要测试的浏览器,选中一个后,继续回车可以添加多个
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
// 测试用例要测试的代码路径,支持用正则的方式添加多个路径
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
// 上面的测试路径中需要排除在外的文件
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

// 是否监测文件变化,自动测试
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

上面配置完成后会在项目根目录生成一个karma.config.js文件,如果上面配置不满足需要,可以直接在配置文件中进行修改。

运行karma start会自动打开配置的测试浏览器,如下图,测试代码中打印的结果也会显示在浏览器控制台:


详细代码见github。