JavaScript单元测试框架-白红宇

我的博客：

简介

测试是保证代码质量的重要环节，web项目的单元测试虽然不能完全完成功能测试，但是却能保证底层单一模块的工作质量，并且在代码重构的时候保证对外接口不会发生变化。

测试框架

Mocha

Jasmine

Jest

Tape

Karma

Mocha

Mocha 是一个灵活的测试框架，但它只是一个结构，你需要引入其他插件来实现一些测试功能，比如断言库、覆盖统计等。

Mocha安装

npm 安装：npm install mocha --save-dev

脚本语法

简要示例：

// 引入需测试的模块或类const add = require("./add");const assert = require("assert");// describe：定义一组测试describe("加法函数测试", function() {    before(function() {        // runs before all tests in this block    });        // it: 定义一个测试用例    it("1 加 1 应该等于 2", function() {        // assert: nodejs内置断言模块        assert.equal(add(1, 1), 2);    });        after(function() {        // runs after all test in this block    });});复制代码

使用方法

为测试脚本创建目录test-mocha，测试脚本命名应遵循[模块名].test.js的风格，然后在package.json中配置测试命令：

"scripts": {    "test-mocha": "mocha test-mocha/"}复制代码

执行npm run test-mocha即可，将输出测试结果如下图：

断言库

Mocha 支持should.js, chai, expect.js, better-assert, unexpected等断言库。以上一个示例，可以对比一下各个断言库的差别：

assert

assert.ok(add(1, 1));assert.equal(add(1, 1), 2);复制代码

should.js

(add(1, 1)).should.be.a.Number();(add(1, 1)).should.equal(2);复制代码

expect.js

expect(add(1, 1)).to.be.a("number");expect(add(1, 1)).to.equal(2);复制代码

chai：支持should, expect, assert三种语法

综上，should.js和expect.js相较于assert语义性更强，且支持类型检测，而should.js在语法上更加简明，同时支持链式语法.and。

hooks

Mocha 支持4种 hook，包括before / after / beforeEach / afterEach。

异步测试

Mocha 默认每个测试用例执行2000ms，超出时长则报错，所以在测试代码中如果有异步操作，则需要通过done函数来明确测试用例结束。done接受Error参数。

BOM/DOM

Mocha 在node环境下运行时，不支持 BOM 和 DOM 接口，需要引入jsdom和jsdom-global库。

Jasmine

Jasmine 是一个功能全面的测试框架，内置断言expect；但是有全局声明，且需要配置，相对来说使用更复杂、不够灵活。

Jasmine安装

npm 安装：npm install jasmine --save-dev

脚本语法

const add = require("../src/add");describe("加法函数测试", function () {    it("1加1等于2", function() {        expect(add(1, 1)).toEqual(2);    });    it("输出数字", function() {        expect(add(1, 1)).toEqual(jasmine.any(Number));    });});复制代码

Jasmine 的语法与 Mocha 非常相似，不过断言采用内置的expect()。

使用方法

新建配置文件jasmine.json:

{    // 测试脚本相对路径    "spec_dir": "test-jasmine",    // 测试脚本    "spec_files": [        "*.test.js"        "!*.notest.js"    ],    // 测试前需要引入的脚本    "helpers": [],    // 是否在遇到第一个报错后停止测试    "stopSpecOnExpectationFailure": false,    // 是否以半随机顺序执行测试    "random": false}复制代码

创建测试脚本目录test-jasmine，脚本文件命名为[模块名].test.js，在package.json中配置测试命令:

"scripts": {    "test-jasmine": "jasmine --config=jasmine.json"}复制代码

然后执行npm run test-jasmine即可，将输出测试结果如下图：

hook 和异步

与 Mocha 相似。

Jest

Jest 是一个功能全面的“零配置”测试框架，既集成了各种工具，且无需配置即可使用。

Jest安装

npm 安装：npm install --save-dev jest

脚本语法

Jest 语法与以上两个框架不太相同：

const add = require("../src/add");describe("加法函数测试", () => {    test("1加1等于2", () => {        expect(add(1, 1)).toBe(2);    }); });复制代码

Jest 中以test定义一个测试用例，且自带断言expect，断言库功能强大，但语法相较于should.js来说更复杂。

断言语法：

普通匹配：toBe, not.toBe

空匹配：toBeNull, toBeUndefined, toBeDefine, toBeTruthy, toBeFalsy

数字大小：toBeGreaterThan, toBeGreaterThanOrEqual, toBeLessThan, toEqual, toBeCloseTo(用于浮点数)

正则匹配：toMatch

数组查询：toContain

构造匹配：toEqual(expect.any(constructor))

使用方法

创建测试脚本目录test-jest，脚本文件命名为[模块名].test.js，在package.json中配置测试命令:

"scripts": {    "test-jest": "jest test-jest/"}复制代码

然后执行npm run test-jest即可，将输出测试结果如下图：

hook

Jest 同样有四个hook，beforeAll/beforeEach/afterAll/afterEach。

BOM/DOM

Jest 内置对 DOM 和 BOM 接口的支持。

覆盖统计

Jest 内置覆盖统计，为了更方便地进行相关配置，我们可以创建一个配置文件jest.config.js：

module.exports = {    // 开启覆盖统计功能    collectCoverage: true,    // 指定需要覆盖的文件    collectCoverageFrom: [        "src/*.js"    ],    // 指定输出覆盖统计结果的目录    coverageDirectory: "test-jest/coverage/",    // 指定测试脚本    testMatch: [    	"**/test-jest/*.test.js"    ]};复制代码

然后将package.json中的命名修改一下："test-jest": "jest"，再运行后可得如下结果：