简介

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

测试框架

  • Mocha
  • Jasmine
  • Jest
  • Tape
  • Karma

Mocha

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

Mocha安装

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

脚本语法

简要示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 引入需测试的模块或类
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中配置测试命令：

1
2
3
"scripts": {
    "test-mocha": "mocha test-mocha/"
}

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

mocha-执行脚本

断言库

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

  • assert

    1
    2
    assert.ok(add(1, 1));
    assert.equal(add(1, 1), 2);

  • should.js

    1
    2
    (add(1, 1)).should.be.a.Number();
    (add(1, 1)).should.equal(2);

  • expect.js

    1
    2
    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

脚本语法

1
2
3
4
5
6
7
8
9
10
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    // 测试脚本相对路径
    "spec_dir": "test-jasmine",
    // 测试脚本
    "spec_files": [
        "*.test.js"
        "!*.notest.js"
    ],
    // 测试前需要引入的脚本
    "helpers": [],
    // 是否在遇到第一个报错后停止测试
    "stopSpecOnExpectationFailure": false,
    // 是否以半随机顺序执行测试
    "random": false
}

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

1
2
3
"scripts": {
    "test-jasmine": "jasmine --config=jasmine.json"
}

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

jasmine-执行脚本

hook 和异步

与 Mocha 相似。

Jest

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

Jest安装

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

脚本语法

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

1
2
3
4
5
6
7
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中配置测试命令:

1
2
3
"scripts": {
    "test-jest": "jest test-jest/"
}

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

jest-执行脚本

hook

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

BOM/DOM

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

覆盖统计

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
    // 开启覆盖统计功能
    collectCoverage: true,
    // 指定需要覆盖的文件
    collectCoverageFrom: [
        "src/*.js"
    ],
    // 指定输出覆盖统计结果的目录
    coverageDirectory: "test-jest/coverage/",
    // 指定测试脚本
    testMatch: [
    	"**/test-jest/*.test.js"
    ]
};

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

jest覆盖统计