4.14.1 mocha 和 supertest

mocha 和 suptertest 是常用的测试组合，通常用来测试 restful 的 api 接口，这里我们也可以用来测试我们的博客应用。
在 myblog 下新建 test 文件夹存放测试文件，以注册为例讲解 mocha 和 supertest 的用法。首先安装所需模块：

  1. npm i mocha supertest --save-dev

修改 package.json，将：

package.json

  1. "scripts": {
  2.   "test": "echo \"Error: no test specified\" && exit 1"
  3. }

修改为：

  1. "scripts": {
  2.   "test": "mocha test"
  3. }

指定执行 test 目录的测试。修改 index.js，将：

index.js

  1. // 监听端口，启动程序
  2. app.listen(config.port, function () {
  3.   console.log(`${pkg.name} listening on port ${config.port}`)
  4. })

修改为:

  1. if (module.parent) {
  2.   // 被 require，则导出 app
  3.   module.exports = app
  4. } else {
  5.   // 监听端口，启动程序
  6.   app.listen(config.port, function () {
  7.     console.log(`${pkg.name} listening on port ${config.port}`)
  8.   })
  9. }

这样做可以实现：直接启动 index.js 则会监听端口启动程序，如果 index.js 被 require 了，则导出 app，通常用于测试。

找一张图片用于测试上传头像，放到 test 目录下，如 avatar.png。新建 test/signup.js，添加如下测试代码：

test/signup.js

  1. const path = require('path')
  2. const assert = require('assert')
  3. const request = require('supertest')
  4. const app = require('../index')
  5. const User = require('../lib/mongo').User
  7. const testName1 = 'testName1'
  8. const testName2 = 'nswbmw'
  9. describe('signup', function () {
  10.   describe('POST /signup', function () {
  11.     const agent = request.agent(app)// persist cookie when redirect
  12.     beforeEach(function (done) {
  13.       // 创建一个用户
  14.       User.create({
  15.         name: testName1,
  16.         password: '123456',
  17.         avatar: '',
  18.         gender: 'x',
  19.         bio: ''
  20.       })
  21.         .exec()
  22.         .then(function () {
  23.           done()
  24.         })
  25.         .catch(done)
  26.     })
  28.     afterEach(function (done) {
  29.       // 删除测试用户
  30.       User.deleteMany({ name: { $in: [testName1, testName2] } })
  31.         .exec()
  32.         .then(function () {
  33.           done()
  34.         })
  35.         .catch(done)
  36.     })
  38.     after(function (done) {
  39.       process.exit()
  40.     })
  42.     // 用户名错误的情况
  43.     it('wrong name', function (done) {
  44.       agent
  45.         .post('/signup')
  46.         .type('form')
  47.         .attach('avatar', path.join(__dirname, 'avatar.png'))
  48.         .field({ name: '' })
  49.         .redirects()
  50.         .end(function (err, res) {
  51.           if (err) return done(err)
  52.           assert(res.text.match(/名字请限制在 1-10 个字符/))
  53.           done()
  54.         })
  55.     })
  57.     // 性别错误的情况
  58.     it('wrong gender', function (done) {
  59.       agent
  60.         .post('/signup')
  61.         .type('form')
  62.         .attach('avatar', path.join(__dirname, 'avatar.png'))
  63.         .field({ name: testName2, gender: 'a' })
  64.         .redirects()
  65.         .end(function (err, res) {
  66.           if (err) return done(err)
  67.           assert(res.text.match(/性别只能是 m、f 或 x/))
  68.           done()
  69.         })
  70.     })
  71.     // 其余的参数测试自行补充
  72.     // 用户名被占用的情况
  73.     it('duplicate name', function (done) {
  74.       agent
  75.         .post('/signup')
  76.         .type('form')
  77.         .attach('avatar', path.join(__dirname, 'avatar.png'))
  78.         .field({ name: testName1, gender: 'm', bio: 'noder', password: '123456', repassword: '123456' })
  79.         .redirects()
  80.         .end(function (err, res) {
  81.           if (err) return done(err)
  82.           assert(res.text.match(/用户名已被占用/))
  83.           done()
  84.         })
  85.     })
  87.     // 注册成功的情况
  88.     it('success', function (done) {
  89.       agent
  90.         .post('/signup')
  91.         .type('form')
  92.         .attach('avatar', path.join(__dirname, 'avatar.png'))
  93.         .field({ name: testName2, gender: 'm', bio: 'noder', password: '123456', repassword: '123456' })
  94.         .redirects()
  95.         .end(function (err, res) {
  96.           if (err) return done(err)
  97.           assert(res.text.match(/注册成功/))
  98.           done()
  99.         })
  100.     })
  101.   })
  102. })

此时编辑器会报语法错误（如：describe 未定义等等），修改 .eslintrc.json 如下：

  1. {
  2.   "extends": "standard",
  3.   "globals": {
  4.     "describe": true,
  5.     "beforeEach": true,
  6.     "afterEach": true,
  7.     "after": true,
  8.     "it": true
  9.   }
  10. }

这样，eslint 会忽略 globals 中变量未定义的警告。运行 npm test 看看效果吧，其余的测试请读者自行完成。

4.14.2 测试覆盖率

我们写测试肯定想覆盖所有的情况（包括各种出错的情况及正确时的情况），但光靠想需要写哪些测试是不行的，总也会有疏漏，最简单的办法就是可以直观的看出测试是否覆盖了所有的代码，这就是测试覆盖率，即被测试覆盖到的代码行数占总代码行数的比例。

注意：即使测试覆盖率达到 100% 也不能说明你的测试覆盖了所有的情况，只能说明基本覆盖了所有的情况。

istanbul 是一个常用的生成测试覆盖率的库，它会将测试的结果报告生成 html 页面，并放到项目根目录的 coverage 目录下。首先安装 istanbul:

  1. npm i istanbul --save-dev

配置 istanbul 很简单，将 package.json 中：

package.json

  1. "scripts": {
  2.   "test": "mocha test"
  3. }

修改为：

  1. "scripts": {
  2.   "test": "istanbul cover _mocha"
  3. }

即可将 istanbul 和 mocha 结合使用，运行 npm test 终端会打印：

测试 - 图1

打开 myblog/coverage/Icov-report/index.html，如下所示：

测试 - 图2

可以点进去查看某个代码文件具体的覆盖率，如下所示：

测试 - 图3

红色的行表示测试没有覆盖到，因为我们只写了 name 和 gender 的测试。