欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js单元测试

程序员文章站 2022-06-04 11:19:59
最近研究了js的单元测试,分享一下心得。 说起单元测试以前还真是不太了解,这次索性了解一番,测试有很多包含单元测试,性能测试,安全测试和功能测试等几方面,本次只介绍一下单元测试。 前端进行单元测试主要是为了提高自己的代码质量,多组测试用例,验证自己的代码是否都能通过,这是在开发中很有必要的。需要倡导 ......

最近研究了js的单元测试,分享一下心得。

说起单元测试以前还真是不太了解,这次索性了解一番,测试有很多包含单元测试,性能测试,安全测试和功能测试等几方面,本次只介绍一下单元测试。

前端进行单元测试主要是为了提高自己的代码质量,多组测试用例,验证自己的代码是否都能通过,这是在开发中很有必要的。需要倡导的是‘开发者应该吃自己的狗粮’,*——*

单元测试主要包含断言,测试框架,测试用例等几个方面,

断言:

断言是对代码结果的一种判断,如果这种判断和结果是一样的,那么这个断言就是真的,测试就通过了,如果为假的,程序就会终止执行,并出现错误信息。

断言库有很多expectshould,chai,其次就是node的assert断言,本次主要说assert断言

var assert=require('assert');
assert.equal(math.max(1,100),100);

一但assert.equal()不满足期望,将会抛出assertionerror异常,整个程序将停止执行。

断言规范中,我们定义一下几种检测方法:
ok()判断结果是否为真,

equal()判断实际值与期望值是否相等,

notequal():判断实际值与期望值是否不相等

deepequal():判断实际值与期望值是否深度相等(对象和数组的元素是否相等)

notdeepequal:判断实际值与期望值是否不深度相等

strictequal:判断实际值与期望值是否严格相等(===)

notstrictequal:判断实际值与期望值是否不严格相等(相当于!==)

throws:判断代码块是否抛出异常

市面上的大多断言库都是基于assert模块进行封装和扩展的,这包括著名的should.js断言库

安装:

npm install  should  --save-dev 

 

测试框架

前面提到断言一旦检查失败,将会抛出异常停止整个应用,这对于大规模的断言检查时并不友好,更通用的就是抛出异常并且继续执行,最后生成测试报告,这任务承担着就是测试框架,优秀的单元测试框架是mocha(发音:摩卡),mocha本身不含有断言库,所以必须先引入断言库,像上面提到的断言库,不限于使用哪种。

安装:

npm install mocha -g(全局安装)

测试风格:

tdd(测试驱动开发)和bdd(行为驱动开发)这两种,他们的不同是什么?

tdd关注多有功能是否被正确的实现,每个功能都具备对于的测试用例;bdd关注整体行为是否符合规格预期,适合自顶向下的设计方式

tdd表达方式偏向于功能说明书的风格;bdd的表达方式更接近于自己的语言习惯

我个人比较习惯bdd风格方式:

主要采用describe和it进行组织,一个测试脚本与所要测试的源码脚本同名,但是后缀名为.test.js(表示测试)或者.spec.js(表示规格),比如,add.js的测试脚本名字就是add.test.js

 

// add.test.js  测试脚本名字
var add = require('../lib/add');

describe('add', function () {
  it('6 + 7 = 13', function () {
    add(6,7).should.equal(13)
  })
  
  it('9 + 10 = 19', function () {
    add(9 , 10).should.equal(19)
  }) 
})

一个测试脚本由一个或多个describe测试套件组成,一个测试套件由一个或多个it测试用例组成,

describe块称为"测试套件"(test suite),表示一组相关的测试。它是一个函数,第一个参数是测试套件的名称("add"),第二个参数是一个实际执行的函数。

it块称为"测试用例"(test case),表示一个单独的测试,是测试的最小单位。是一个函数,第一个参数是测试用例的名称("6 + 7 = 13"),第二个参数是一个实际执行的函数。

mocha基本用法

有了测试脚本就可以使用mocha运行它

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

mocha file1 file2 file3

注意:mocha默认运行test子目录第一层的测试用例,不会执行更下层的用例。

例如:test文件下有个dir目录,里面有个测试脚本add.test.js,这是执行不到的,为了改变这种行为,就必须加上--recursive参数,这时test子目录下面所有的测试用例都会执行。

对于es6,需要经过编译后才可以进行测试,

转码需要安装

npm install babel-core babel-preset-es2015 --save-dev

然后 在根目录下面创建babelrc,配置:

{
  "presets": [ "es2015" ]
}

注意,babel默认不会对iterator、generator、promise、map、set等全局对象,以及一些全局对象的方法(比如object.assign)转码。如果你想要对这些对象转码,就要安装babel-polyfill

npm install babel-polyfill --save-dev

使用时候需要导入

import 'babel-polyfill'

测试工具

karma则属于测试工具,能够模拟各种环境来运行你的测试代码,比如chrome,firefox,mobile等等。

(提一下:travis ci,是一个远程免费的持续集成(ci)服务,你可以通过配置绑定你github上的项目,并且配置运行环境,实现只要github上有代码更新,travis就会自动运行构建和测试,并反馈运行结果。)

使用karma

步骤
全局安装 karma
npm install -g karma-cli
安装所有依赖
......
初始化测试
karma init
    1. which testing framework do you want to use ? (mocha)
    2. do you want to use require.js ? (no)
    3. do you want to capture any browsers automatically ? (chrome)
    4. what is the location of your source and test files ? (https://cdn.bootcss.com/jquery/2.2.4/jquery.js, node_modules/should/should.js, test/**.js)
    5. should any of the files included by the previous patterns be excluded ? ()
    6. do you want karma to watch all the files and run the tests on change ? (yes)
启动测试
karma start

karma.conf.js:

module.exports = function(config) {
  config.set({
    basepath: '',
    frameworks: ['mocha'], //使用的框架
    files: [ //依赖模块
      'https://cdn.bootcss.com/jquery/2.2.4/jquery.js',
      'node_modules/should/should.js',
      'test/**/*.js',
      'src/**/*.js'
    ],
    exclude: [//排除文件列表
    ],
    preprocessors: {
    },
    reporters: ['progress'],

    port: 9876,//服务端口号

    colors: true,//启用或禁用输出报告或者日志中的颜色

    loglevel: config.log_info,

    autowatch: true, //启用或禁用自动检测文件变化进行测试

    browsers: ['chrome'], //测试启动的浏览器
    singlerun: false,//开启或禁用持续集成模式  设置为true, karma将打开浏览器,执行测试并最后退出
    concurrency: infinity//并发级别(启动的浏览器数)
  })
}

详细了解可以去karma :http://karma-runner.github.io/latest/index.html