Mocha单元测试 - kavience

什么是单元测试?

单元测试( unit testing )，是指对软件中的最小可测试单元进行检查和验证。在前端领域来说，我们主要是针对 JavaScript 的类( class ) 或者方法( function ) 进行单元测试，以增强代码的可靠性和可维护性。下面介绍的是 mocha 单元测试框架。

mocha 测试框架

mocha 是一个测试框架，可以通过 npm 全局安装在本地，或者是局部安装在项目中。

# 全局安装
npm i -g mocha
# 局部安装在 dev 环境下
npm i --save-dev mocha

在测试文件中，写入如下代码:

function add(n, m) {
    return n + m;
}

describe("add", () => {
    it('should return 2', () => {
        const count = add(1, 1);
        if ( count !== 2) {
            throw new Error("1 + 1 应该等于2")；
        }
    });
});

运行 mocha

mocha
# 或
./node_modules/.bin/mocha
# 或指定文件
./node_modules/.bin/mocha --file ./src/__test__/*.test.js

mocha 命令常用参数

Options:

    -h, --help                  输出帮助信息
    -V, --version               输出mocha的版本号
    -A, --async-only            强制所有的测试用例必须使用callback或者返回一个promise的格式来确定异步的正确性
    -c, --colors                在报告中显示颜色
    -C, --no-colors             在报告中禁止显示颜色
    -g, --growl                 在桌面上显示测试报告的结果
    -O, --reporter-options <k=v,k2=v2,...>  设置报告的基本选项
    -R, --reporter <name>       指定测试报告的格式
    -S, --sort                  对测试文件进行排序
    -b, --bail                  在第一个测试没有通过的时候就停止执行后面所有的测试
    -d, --debug                 启用node的debugger功能
    -g, --grep <pattern>        用于搜索测试用例的名称，然后只执行匹配的测试用例
    -f, --fgrep <string>        只执行测试用例的名称中含有string的测试用例
    -gc, --expose-gc            展示垃圾回收的log内容
    -i, --invert                只运行不符合条件的测试用例，必须和--grep或--fgrep之一同时运行
    -r, --require <name>        require指定模块
    -s, --slow <ms>             指定slow的时间，单位是ms，默认是75ms
    -t, --timeout <ms>          指定超时时间，单位是ms，默认是200ms
    -u, --ui <name>             指定user-interface (bdd|tdd|exports)中的一种
    -w, --watch                 用来监视指定的测试脚本。只要测试脚本有变化，就会自动运行Mocha
    --check-leaks               检测全局变量造成的内存泄漏问题
    --full-trace                展示完整的错误栈信息
    --compilers <ext>:<module>,...  使用给定的模块来编译文件
    --debug-brk                 启用nodejs的debug模式
    --es_staging                启用全部staged特性
    --harmony<_classes,_generators,...>     all node --harmony* flags are available
    --preserve-symlinks                     告知模块加载器在解析和缓存模块的时候，保留模块本身的软链接信息
    --icu-data-dir                          include ICU data
    --inline-diffs              用内联的方式展示actual/expected之间的不同
    --inspect                   激活chrome浏览器的控制台
    --interfaces                展示所有可用的接口
    --no-deprecation            不展示warning信息
    --no-exit                   require a clean shutdown of the event loop: mocha will not call process.exit
    --no-timeouts               禁用超时功能
    --opts <path>               定义option文件路径
    --perf-basic-prof           启用linux的分析功能
    --prof                      打印出统计分析信息
    --recursive                 包含子目录中的测试用例
    --reporters                 展示所有可以使用的测试报告的名称
    --retries <times>           设置对于失败的测试用例的尝试的次数
    --throw-deprecation         无论任何时候使用过时的函数都抛出一个异常
    --trace                     追踪函数的调用过程
    --trace-deprecation         展示追踪错误栈
    --use_strict                强制使用严格模式
    --watch-extensions <ext>,... --watch监控的扩展
    --delay                     异步测试用例的延迟时间
    --extension                 指定测试文件后缀
    --file                      指定测试文件目录
    ...

除了以上命令参数外，可以输入 mocha -h 查看更多命令参数。更多关于 mocha 的使用，请看文档。

chai 断言库

为了更友好的显示测试结果，可以使用 chai 断言库:

1 2	# 安装 chai npm i --save-dev chai

使用方法:

// 这里是 es5 的使用方法，使用 ES6 在下面会讲到
var expect = require("chai").expect;

function add(n, m) {
  return n + m;
}

describe("add", () => {
  it("should return 2", () => {
    const count = add(1, 1);
    expect(count).to.eqls(2);
  });
});

更多关于 chai 的使用请看文档。

使用 ES6

如果我们要在测试文件中写 ES6 语法的话，需要通过 @babel/register 编译

# 安装 babel
npm i @babel/register
# 运行时添加 --require
./node_modules/.bin/mocha --require @babel/register --file ./src/__test__/*.js

这个时候测试文件就可以写 ES6 的语法了

import { expect } from "chai";
import { add } from "./add";

describe("add", () => {
  it("should return 2", () => {
    const count = add(1, 1);
    expect(count).to.eqls(2);
  });
});

使用 sinon 进行截取和模拟函数

sinon 提供 stub 和 spy 等函数进行截取和模拟真实函数，以更简单的方式进行测试:

import { expect } from "chai";
import { stub } from "sinon";
import calc from "./calc";

// describe 可以嵌套，通常一个测试只测试某一个文件，现在测试 calc 整个文件
describe("calc", () => {
  // 最好不要这样直接 stub 要测试的方法，不然还测试什么呢？
  decribe("add", () => {
    it("should return 2", () => {
      calcAddStub = stub(calc, "add").returns(2); // 仅仅为了举例
      expect(calcAddStub()).to.eqls(2);
    });
  });
  // 还可以通过 resolves 模拟异步操作
  decribe("calc time", () => {
    it("should return correct time", async () => {
      const calcTimeStub = stub(calc, "add").resolves(2); // 仅仅为了举例
      const count = await calcTimeStub();
      expect(count).to.eqls(2);
    });
  });
});

更多关于 sinon 的使用请看文档。

使用 enzyme 浅拷贝 React 组件

如果要测试 React 组件，可以使用 enzyme 进行模拟

import { expect } from "chai";
import { stub } from "sinon";
import { shallow } from "enzyme";
import App from "./App";

describe("App", () => {
  const defaultProps = {
    count: 1,
  };
  const render = (props) => shallow(<App {...props} {...defaultProps} />);

  decribe("add", () => {
    it("should return 2", () => {
      const component = render();
      const count = component.instance().add(1, 1);
      expect(count).to.eqls(2);
    });
  });
});

更多关于 enzyme 的使用请看文档。

使用 Istanbul 查看测试覆盖率

一般项目都需要达到某一覆盖率以上，以确保代码的健壮性，可以使用 Istanbul (伊斯坦布尔) 包。

# 安装，Istanbul 包改名了，叫 nyc
npm i --save-dev nyc

# 运行
./node_modules/.bin/nyc ./node_modules/.bin/mocha --require @babel/register --file ./src/__test__/*.test.js

运行会重新跑一次测试，并且在当前目录生成 .coverage 目录，可以直接在浏览器打开并且查看覆盖率。