前言

这篇文章读完之后：如果你感兴趣/想尝试，我建议你去读阮一峰的相关文章，会对你有更大的提升

🌝目的

讲述需求

我们作为前端：时常有自己的项目或者公司的项目后端部分需要支撑一下这个时候为了保证我们的代码质量（仅仅作为前端来说）尤其是不爱写校验的朋友们例如我我们至少需要进行单元测试来保证我们和前端（我们自己）联调的顺利

---

✅单元测试

介绍

我们来介绍一个经常使用于JavaScript库：Mocha(谐音：摩卡)

我整体用下来感觉：用这个比较爽 推荐给大家

1. TDD测试驱动开发思想
2. 异步测试，支持Promise、async/await
3. 通常和 Chai 断言库一块搭配使用
4. 控制台报告很丰富、给程序员一种很酷的感觉
5. 生命周期钩子 before/after/beforeEach/afterEach
6. 等等...等你来发现

安装

1、使用 npm 安装

npm install mocha --save-dev

2、在你的跟目录下创建一个 test(固定名字)文件名/或者输入命令创建

mkdir test

3、事实上到这里，你已经成功了。执行一下命令测试

npx mocha  // 注：他会默认找test文件下的所有文件去运行测试。你的不是这样的话自己完善路径
 比如：-rspec
        -test  那么你就是 npx rspec/test

看我的结果：执行了42个测试，全部成功！

教程

安装chai断言库

npm install chai --save-dev

基础使用

chai就是要期待你出现什么结果 注：后边只说 expect 风格我先在 test 下创建一个文件名为 index.rspec.js

const chai = require('chai');
const expect = chai.expect;

// 使用 expect 风格断言
expect(true).to.be.true;
expect(42).to.equal(42);
// 使用 should 风格断言
true.should.be.true;
42.should.equal(42);
// 使用 assert 风格断言
assert.isTrue(true);
assert.equal(42, 42);

这里我的test文件在rspec下，所以命令比你们多一层：你们只需控制台输入

 mocha test/index.rspec.js // 执行测试用例某个文件。支持运行单个文件
                          // 如果执行mocha test/npx mocha 就是执行全部文件

发现 0 passing ？正常我们写一个测试用例就是 1个passing 所以我们加以改装

const chai = require('chai');
const expect = chai.expect;

describe('第一个测试用例', function () {
  it('chai断言库', async function () {
    expect(true).to.be.true;
    expect(42).to.equal(42);
  })
})

---

ok,到此为止 是成功状态，那如果"期待"错误的值会怎么样？怎么样？报错还是很清晰明了的吧？

---

Mocha 还支持不同的报告格式

以上我们都是使用默认格式，现在我们来尝试用命令行参数来指定报告格式 (--reporter)

• 支持 dot

 mocha test/index.rspec.js --reporter dot 

• 支持 nyan （猫咪?）

• 支持 loading（小飞机）

• 支持progress（进度条）

• 支持 min （精简）

• 甚至markdown等等许多格式， 你可以自己找一下自己喜欢的格式

桌面提示

mocha --growl

自动启动

如果脚本有变化，自动运行 mocha

mocha --watch

Es6支持

Mocha 可以使用如箭头函数等新语法

describe('my suite', () => {
  it('my test', () => {
    this.timeout(1000);
    assert.ok(true);
  });
});

进阶教程

好了言归正题 Mocha 都是一个为我们做测试的工具，那我们平时起的服务如 Express？koa？等等 都是可以使用Mocha来检测接口的

---

这里我以 Express + mongoDb 为例进行一次接口的测试：

首先：创建虚拟数据库

引用 mongodb-memory-server 和 mongoose => 测试数据库

npm install mongodb-memory-server
npm install mongoose

使用：我单独创建了一个文件写 mongodb 测试启个功能

/* 
  * mongodb测试启动文件
*/

const { MongoMemoryServer } = require('mongodb-memory-server');
const mongoose = require('mongoose');
const mongoServer = new MongoMemoryServer();

before(async function () {
  const mongoUri = await mongoServer.getUri();
  await mongoose.connect(mongoUri, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });
});

after(async function () {
  await mongoose.disconnect();
  await mongoServer.stop();
});

然后：创建所有需要用的库的入口文件

var chai = require('chai');
const request = require('supertest');
const app = require('../app');

const expect = chai.expect;

require('./mongodb.setup') // 引入刚创建好的测试数据库脚本
module.exports = {
  request,
  app,
  expect,
};

来我们的 index.rspec.js 文件写第一个测试用例

const { request, app, UserModel, ClassInfoModel, expect } = require('../setup')

describe('班级信息', function () {
  it('查询相关同学', async function () {
    const textData = [
      { stuId: 123, name: '1', classId: 123123 },
      { stuId: 111, name: '2', classId: 123123 },
      { stuId: 222, name: '3', classId: 111 },
    ]
    await ClassInfoModel.insertMany(textData)
    const classId = 123123
    const res = await request(app)
      .get('/api/class')
      .query({ classId })
      .set('Authorization', `Bearer testToken`)
      .expect(200)
    const data = res.body
    expect(data).to.be.an('array')
    expect(data).to.have.lengthOf(2)
  })
})

一步步分析：1、先向ClassInfoModel模型里插入几条Mock数据2、模拟请求 发出：向接口路径为/api/class发起假请求并携带参数classId3、我们期待的状态码是 2004、期待结果data是一个数组，并且长度为 2 （因为我们的接口要查询的是 为classId的搜索数据，自然就是两条了）🔽看接口定义

/** 
  * @param {classId}
  * @method 查询此班级下的所有同学信息
  */

router.get('/', async function (req, res, next) {
  const { classId } = req.query
  try {
    const data = await ClassInfoModel.find({
      classId
    })
    if (data.length === 0) {
      return res.status(200).send({ message: '该班级下没有同学' })
    }
    res.status(200).send(data)
  } catch (error) {
    res.status(500).json({ message: '服务器出错！' })
  }
});

运行测试用例：

mocha test/class.rspec.js --reporter dot

🎦结语

有无描述

看到这里，做一些简单的单元测试已经没问题了当然Mocha的功能远不止如此...

---

回到开头

这篇文章读完之后：如果你感兴趣/想尝试，我建议你去读阮一峰的相关文章，会对你有更大的提升

---

有用，点个赞再走吧？ 👀