mocha: step by step-白红宇

mocha: step by step

阅读量：6714 次

发布时间：2019-06-25

本文共 3604 字，大约阅读时间需要 12 分钟。

如何从0开始？

当然先从mocha的官网开始, 只需要照搬即可 https://mochajs.org/#getting-started

$ yarn add mocha --dev // 或 npm install mocha --save-dev$ mkdir test$ $EDITOR test/test.js # or open with your favorite editor

test.js

var assert = require('assert');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));    });  });});

运行结果：

$ ./node_modules/mocha/bin/mocha  Array    #indexOf()      ✓ should return -1 when the value is not present  1 passing (9ms)

test命令配置到package.json中更简便：

"scripts": {    "test": "mocha"  }

运行

yarn run test  // 或 npm run test

???，到这里，mocha的入门算是完成了！

想使用不同的断言库，比如chai怎么办呢？

安装chai

yarn add chai --dev

chai有三种风格，assert, expect 和should，后两种是BDD(Behavior Driven Development)，根据个人喜好选择，个人比较喜欢expect和should，有点类似Promise

首先，新建src、test两个目录，src下放源码，test是测试文件目录

源文件 src/sum.js

function sum (one, two) {  if (typeof one !== 'number' || typeof two !== 'number') {    throw new Error('error, not a number input')  }  return +one + +two}export default sum

测试文件 test/sum.test.js

import {expect} from 'chai'import sum from '../src/sum'describe('sum', function () {  it('should return 3 when the 1 add 2', function () {    expect(sum(1, 2)).to.equal(3)  })  it('should throw Error when only input 1', function () {    expect(function () {      sum(1)    }).to.throw(/error/)  })  it('should throw Error when input m', function () {    expect(function () {      sum('m')    }).to.throw(/error/)  })  it('should return 3 when 1 add 2 add 3', function () {    expect(sum(1, 2, 3)).to.equal(3)  })})

这里使用了import, es6的语法，所以需要引入babel帮助转换成es5

pacakge.json

"devDependencies": {    "babel-cli": "^6.24.1",    "babel-polyfill": "^6.23.0",    "babel-preset-env": "^1.5.1",    "babel-register": "^6.24.1",    "chai": "^3.5.0"    "mocha": "^3.4.2"  }

新建.babelrc 文件

{  "presets": ["env"]}

运行 yarn run test 会报错，说是'import' 是 unexpected token

因为测试代码使用了es6的语法，所以运行mocha的时候也需要配置一下

参考babel installation: http://babeljs.io/docs/setup/#installation

package.json

"scripts": {    "test": "mocha --require babel-polyfill --compilers js:babel-register"  },

这样，再次运行测试就通过了

???，哈哈，已经会使用mocha+chai进行单元测试啦

听过代码覆盖率，我也想用它看看我的测试代码，写的咋样

当然么有问题，这里介绍一个常用的检测代码覆盖率的库istanbul

要引入他，也是非常的简单

yarn add nyc --save

package.json

"scripts": {    "test": "nyc mocha --require babel-polyfill --compilers js:babel-register"  },

test的配置太丑了，能好看点吗？

当然可以，分三步走

第一步：安装cross-env啊，赤裸裸的广告~~??

yarn add cross-env --dev

第二步：安装babel-plugin-istanbul ，专门对付es6的 ???

yarn add babel-plugin-istanbul --dev

非常的注意，如果安装了istanbul, 一定要删掉，否则两个库会打架，结果是两败俱伤哦?

第三步：改造配置项

.babelrc

{  "env": {    "test": {      "presets": ["env"],      "plugins": ["istanbul"]    }  },  "presets": ["env"]}

.pacakge.json

{  "name": "mochaLearn",  "version": "1.0.0",  "main": "index.js",  "license": "MIT",  "devDependencies": {    "babel-cli": "^6.24.1",    "babel-plugin-istanbul": "^4.1.3",    "babel-polyfill": "^6.23.0",    "babel-preset-env": "^1.5.1",    "babel-register": "^6.24.1",    "chai": "^3.5.0",    "cross-env": "^5.0.0",    "mocha": "^3.4.2",    "nyc": "^10.3.2"  },  "nyc": {    "require": [      "babel-polyfill",      "babel-register"    ]  },  "scripts": {    "test": "cross-env BABEL_ENV=test nyc mocha"  }}

运行结果：