js单元测试

谁借莪１个温暖的怀抱￠ 2022-01-07 13:01 155阅读 0赞

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

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

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

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

**断言：**

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

断言库有很多`expect`，`should，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]。

// 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

` `

转载于:https://www.cnblogs.com/zhanghaiyu-Jade/p/10542511.html

[add.test.js]: https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fruanyf%2Fmocha-demos%2Fblob%2Fmaster%2Fdemo01%2Fadd.test.js