前端单元测试_ES2015(es6)

上一篇: co模块的前端实现下一篇:JavaScript30秒，从入门到放弃

前端单元测试

发布时间：2019-08-20 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了前端单元测试，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

为保证代码的质量，单元测试必不可少。本文记录自己在学习单元测试过程中的一些总结。
TDD与BDD的区别
TDD属于测试驱动开发，BDD属于行为驱动开发。个人理解其实就是TDD先写测试模块，再写主功能代码，然后能让测试模块通过测试，而BDD是先写主功能模块，z再写测试模块。详见示例
服务端代码测试
所谓服务端代码，指的就是一个node的模块，能在node的环境中运行。以一个项目为例，代码结构如下:

      
      
      
      
      
.
├── index.js
├── node_modules
├── package.json
└── test
    └── test.js
前端测试框架主要是Mocha与Jasmine，这里我们选择Mocha，断言库有should、expect、chai以及node自带的assert。这里我们选择chai，chai中包含了expect、should及assert的书写风格。

      
      
      
      
      
npm install mocha chai --save-dev
index.js

      
      
      exports = getNum" tITle="" data-original-title="复制">
      
      
const getNum = (value) => {
  return value * 2
}

module.exports = getNum
test.js

      
      
      
      
      
const chai = require('chai')
const exPEct = chai.expect
const getNum = require('../index')

describe('Test', function() {
  it('should return 20 when the value is 10', function() {
      expect(getNum(10)).to.equal(20)
  })
})
describe用于给测试用例分组，it代表一个测试用例。
package.json

      
      
      
      
      
"scripts": {
  "test": "mocha"
}
&nbsp;需要在全局下安装Mocha

      
      
      
      
      
npm install mocha -g
项目目录下执行

      
      
      
      
      
npm run test
测试通过

完成代码测试之后我们再去看看代码测试的覆盖率。测试代码覆盖率我们选择使用istanbul，全局安装

      
      
      
      
      
npm install -g istanbul
使用istanbul启动Mocha

      
      
      
      
      
istanbul cover _mocha
测试通过，覆盖率100%

行覆盖率（line coverage）：是否每一行都执行了？
函数覆盖率（function coverage）：是否每个函数都调用了？
分支覆盖率（branch coverage）：是否每个if代码块都执行了？
语句覆盖率（statement coverage）：是否每个语句都执行了？
修改index.js再看代码覆盖率

      
      
      === 0) {
    return 1
  }else {
    return value * 2
  }
}

module.exports = getNum" title="" data-original-title="复制">
      
      
const getNum = (value) => {
  if(value === 0) {
    return 1
  }else {
    return value * 2
  }
}

module.exports = getNum
发现代码覆盖率发生了变化

修改test.js添加测试用例

      
      
      
      
      
describe('Test', function() {
  it('should return 20 when the value is 10', function() {
      expect(getNum(10)).to.equal(20)
  })
  it('should return 1 when the value is 0', function() {
    expect(getNum(0)).to.equal(0)
  })
})
代码覆盖率又回到了100%

客户端代码
客户端代码即运行在浏览器中的代码，代码中包含了window、document等对象，需要在浏览器环境下才能起作用。还是以一个项目为例，代码结构如下:

      
      
      
      
      
.
├── index.js
├── node_modules
├── package.json
└── test
    └── test.js
    └── test.htML
我们依然使用Mocha测试库及chai断言库。

      
      
      
      
      
npm install mocha chai --save-dev
index.js

      
      
      
      
      
window.createDiv = function(value) {
  VAR oDiv = document.createElement('div')
  oDiv.id = 'myDiv'
  oDiv.innerHTML = value
  document.body.appendChild(oDiv)
}
test.js

      
      
      
      
      
mocha.ui('bdd')

var expect = chai.expect
describe("Tests", function () {
  before(function () {
    createDiv('test')
  })
  it("content right", function () {
    var el = document.querySelector('#myDiv')
    expect(el).to.not.equal(null)
    expect(el.innerHTML).to.equal("test")
  })
})

mocha.run()
test.html

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
   
      Tests 
     
   
   
     
     
     
     
     
   
 " title="" data-original-title="复制">
      
      
<html>
   <head>
     <title> Tests </title>
     <link rel="stylesheet" href="../node_modules/mocha/mocha.css"/>
   </head>
   <body>
     <div id="mocha"></div>
     <script src="../node_modules/mocha/mocha.js"></script>
     <script src="../node_modules/chai/chai.js"></script>
     <script src="../index.js"></script>
     <script src="./test.js"></script>
   </body>
 </html>
直接用浏览器打开test.html文件便能看到测试结果

当然我们可以选择PhantomJS模拟浏览器去做测试，这里我们使用mocha-phantomjs对test.html做测试。
全局安装mocha-phantomjs

      
      
      
      
      
npm install mocha-phantomjs -g
修改package.json

      
      
      
      
      
"scripts": {
  "test": "mocha-phantomjs test/test.html"
}
项目目录下执行

      
      
      
      
      
npm run test
mocha-phantomjs在mac下执行会报phantomjs terminated with signal SIGSEGV，暂时没有找到什么解决方案。所以我在ubuntu下执行，结果显示如图
@H_304_690@

上述方式虽然能完成代码的单元测试，但是要完成代码覆盖率的计算也没有什么好的方式，所以我选择引入测试管理工具karma
karma使用指南
略去一大堆介绍karma的废话，项目下引入karma

      
      
      
      
      
npm install karma --save-dev
初始化配置karma配置文件

      
      
      
      
      
npm install karma -g
karma init
使用karma默认配置看看每一项的作用
Karma.conf.js

      
      
      
      
      
module.exports = function(config) {
  config.set({
    basePath: '', // 设置根目录
    frameworks: ['jasmine'], // 测试框架
    files: [ // 浏览器中加载的文件
    ],
    exclude: [ // 浏览器中加载的文件中排除的文件
    ],
    PReprocessors: { // 预处理
    },
    reporters: ['progress'], // 添加额外的插件
    port: 9876, // 开启测试服务时监听的端口
    colors: true,
    LOGLevel: config.LOG_INFO,
    autoWatch: true, // 监听文件变化，发生变化则重新编译
    browsers: ['Chrome'], // 测试的浏览器
    singleRun: false, // 执行测试用例后是否关闭测试服务
    concurrency: Infinity
  })
}
此时的项目结构如下所示

      
      
      
      
      
.
├── index.js
├── node_modules
├── package.json
├── karma.conf.js
└── test
    └── test.js
首先我们将测试框架jasmine改为我们熟悉的mocha及chai，添加files及plugins

      
      
      
      
      
npm install karma karma-mocha karma-chai mocha chai karma-chrome-launcher --save-dev
karma.conf.js

      
      
      
      
      
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai'],
    files: [
        'index.js',
        'test/*.js'
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity,
    plugins: [
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-chai',
    ]
  })
}
全局安装karma-cli

      
      
      
      
      
npm install -g karma-cli
修改package.json

      
      
      
      
      
"scripts": {
  "test": "karma start karma.conf.js"
}
执行npm run test便可以启用chrome去加载页面。

karma测试代码覆盖率
测试代码覆盖率，我们还是选择使用PhantomJS模拟浏览器，将singleRun设为true，即执行完测试用例就退出测试服务。

      
      
      
      
      
npm install karma-phantomjs-launcher --save-dev
将browsers中的Chrome改为PhantomJS，plugins中的karma-chrome-launcher改为karma-phantomjs-launcher
执行npm run test ，测试通过且自动退出如图所示

引入karma代码覆盖率模块karma-coverage，改模块依赖于istanbul

      
      
      
      
      
npm install istanbul karma-coverage --save-dev
修改karma.conf.js

      
      
      
      
      
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai'],
    files: [
        'index.js',
        'test/*.js'
    ],
    exclude: [
    ],
    preprocessors: {
        'index.js': ['coverage']
    },
    reporters: ['progress', 'coverage'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: true,
    concurrency: Infinity,
    coverageReporter: {
      type : 'text-summary'
    },
    plugins: [
      'karma-phantomjs-launcher',
      'karma-mocha',
      'karma-coverage',
      'karma-chai',
    ]
  })
}
对index.js文件使用coverage进行预处理，加入karma-coverage插件，覆盖率测试输出coverageReporter配置，详见这里这里为了方便截图显示将其设为text-summary
执行npm run test，显示结果如下图所示

ES6代码覆盖率计算
目前的浏览器并不能兼容所有ES6代码，所以ES6代码都需要经过babel编译后才可在浏览器环境中运行，但编译后的代码webpack会加入许多其他的模块，对编译后的代码做测试覆盖率就没什么意义了。
index.js

      
      
      
      
      
const createDiv = value => {
  var oDiv = document.createElement('div')
  oDiv.id = 'myDiv'
  oDiv.innerHTML = value
  document.body.appendChild(oDiv)
}

module.exports = createDiv
我们使用ES6中的箭头函数
test.js

      
      
      
      
      
const createDiv = require('../index')
describe("Tests", function () {
  before(function () {
    createDiv('test')
  })
  it("content right", function () {
    var el = document.querySelector('#myDiv')
    expect(el).to.not.equal(null)
    expect(el.innerHTML).to.equal("test")
  })
})
kama.conf.js

      
      
      
      
      
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai'],
    files: [
        'test/*.js'
    ],
    exclude: [
    ],
    preprocessors: {
        'index.js': ['coverage'],
        'test/*.js': ['webpack']
    },
    reporters: ['progress', 'coverage'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: true,
    concurrency: Infinity,
    coverageReporter: {
      type : 'text-summary'
    },
    webpack: {
      module: {
        rules: [
          {
            test: /.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                "presets": ["es2015"],
                "plugins": [["istanbul"]]
              }
            }
          }
        ]
      }
    },
    plugins: [
      'karma-phantomjs-launcher',
      'karma-mocha',
      'karma-coverage',
      'karma-webpack',
      'karma-chai',
    ]
  })
}
test.js文件通过require引入index.js文件，所以files只需引入test.js文件，再对test.js做webpack预处理。
需要相关的babel，webpack，karma依赖如下：

      
      
      @H_712_1267@
      
      
"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-plugin-istanbul": "^4.1.5",
  "babel-preset-es2015": "^6.24.1",
  "chai": "^4.1.2",
  "istanbul": "^0.4.5",
  "karma": "^2.0.0",
  "karma-chai": "^0.1.0",
  "karma-coverage": "^1.1.1",
  "karma-mocha": "^1.3.0",
  "karma-phantomjs-launcher": "^1.0.4",
  "karma-webpack": "^2.0.9",
  "mocha": "^4.1.0",
  "webpack": "^3.10.0"
}
执行npm run dev显示如图所示

travisCI及coveralls
travisCI的配置这里不做详解，我们将通过代码测试覆盖率上传到coveralls获取一个covarage的icon。

如果你是服务端代码使用istanbul计算代码覆盖率的
.travis.yml

      
      
      
      
      
language: node_js
node_js:
- 'stable'
- 8
branches:
  only:
  - master
install:
- npm install
script:
- npm test
after_script: "npm install coveralls && cat ./coverage/lcov.info | coveralls"
如果你是服务端代码使用karma计算代码覆盖率的，则需使用coveralls模块

      
      
      
      
      
npm install coveralls karma-coveralls --save-dev
Karma.conf.js

      
      
      
      
      
// Karma configuration
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai'],
    files: [
      'test/*.js'
    ],
    exclude: [],
    preprocessors: {
      'test/*.js': ['webpack'],
      'index.js': ['coverage']
    },
    reporters: ['progress', 'coverage', 'coveralls'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: true,
    concurrency: Infinity,
    webpack: {
      module: {
        rules: [
          {
            test: /.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                "presets": ["es2015"],
                "plugins": [["istanbul"], ["transform-runtime"]]
              }
            }
          }
        ]
      }
    },
    coverageReporter: {
      type : 'lcov',
      dir : 'coverage/'
    },
    plugins: [
      'karma-webpack',
      'karma-phantomjs-launcher',
      'karma-coverage',
      'karma-mocha',
      'karma-chai',
      'karma-coveralls'
    ],
  })
}
plugins添加karma-coveralls，reporters添加coveralls，coverageReporter输出配置改为lcov。
可以参考我自己实现的一个show-toast库
参考
https://github.com/tmallfe/tm...
https://codeutopia.net/blog/2...
https://github.com/jdavis/tdd...
https://jasmine.github.io/
https://github.com/bbraithwai...
https://mochajs.org/
https://toutiao.io/posts/5649...
https://coveralls.io/
https://karma-runner.github.i...
https://github.com/karma-runn...
https://shouldjs.github.io/
https://juejin.im/post/598073...
http://www.bradoncode.com/blo...
http://docs.casperjs.org/en/l...
https://github.com/gotwarlost...
https://www.jianshu.com/p/ffd...
http://www.bijishequ.com/deta...
http://phantomjs.org/
https://github.com/CurtisHump...
http://www.jackpu.com/shi-yon...
https://github.com/JackPu/Jav...
https://github.com/caitp/karm...
https://github.com/karma-runn...

脚本宝典总结

以上是脚本宝典为你收集整理的前端单元测试全部内容，希望文章能够帮你解决前端单元测试所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：all all babel break break button button Class const const const div do document else else es6 export export export false false for for form form frame frame function function function HTML if in in Infinity int java link name name node null null option option package package plugin plugin post-format-gallery reset reset return return return select static static static text text top top true undefined undefined var window window 箭头函数箭头函数

上一篇: co模块的前端实现下一篇:JavaScript30秒，从入门到放弃

猜你在找的ES2015(es6)相关文章

vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12

全站导航更多

最新ES2015(es6)教程

热门ES2015(es6)教程