web前端好帮手 - Jest单元测试工具

本文介绍如何使用Jest覆盖Web前端单元测试、如何统计测试覆盖率，Jest对比Mocha等内容。

Jest是什么？

Jest是一个令人愉快的 JavaScript 测试框架，专注于简洁明快。

正如官方介绍所说，Jest是一款开箱即用的测试框架，其中包含了Expect断言接口、Mock接口、Snapshot快照、测试覆盖率统计等等全套测试功能。

为什么不推荐Mocha？
不支持原生并行测试

断言库要另外安装

测试覆盖率统计功能要另外安装

原生输入的测试报告可读性很差，格式化也要另外安装

不支持snapshot，要另外安装第三方插件

Mocha使用过程中要安装大量第三方模块安装维护，这个过程繁琐并且容易出问题。以至于我每次想写Mocha单元测试时，都要花半天去 重读 他的文档，这个过程让我逐渐地变得“害怕”写单元测试。

而现在只需要运行 npm install -D jest 一键安装Jest，便可以快速接入单元测试编写中。

Jest基础使用
项目接入Jest
安装Jest和Jest类型文件，类型文件可以让代码编辑器（如Webstorm）提供Jest相关接口的参数提示：

npm install -D jest @types/jest
在项目目录下创建 jest.config.js ，配置参考官网。

在packages.json配置命令行接口:

{
“scripts”: {
“test”: “jest”,
“test-debug”: “node --inspect-brk node_modules/jest/bin/jest.js --runInBand”
}}
其中 npm run test-debug path/to/xx.test.js 接口是用在chrome://inspect上进行断点调试的，后面调试章节会具体介绍。

执行 npm run jest 命令后就可以跑起项目单元测试了。

一个简单的测试
假设项目中 common/url.js 文件有两个 parse(url:string)``getParameter(url:string) 方法需要覆盖单元测试：

const url = require("./common/url.js");

describe(“url.parse”, () => {
test(“解析一般url”, () => { const uri = url.parse(“http://kg.qq.com/a/b.html?c=1&d=%2F”);
expect(uri.protocol).toBe(“http:”);
expect(uri.hostname).toBe(“kg.qq.com”); // …
});
test(“解析带hash的url”, () => {…});
test(“解析url片段”, () => {…});
});

describe(“url.getParameter”, () => {
test(“从指定url中获取查询参数”, () => {
expect(url.getParameter(“test”, “?test=hash-test”)).toBe(“hash-test”); // …
});
test(“从浏览器地址中获取查询参数”, () => {…});
test(“当url中参数为空时”, () => {…});
test(“必须decodeURIComponent”, () => {…});
});
能看到， describe() 方法是用来分组（划分作用域）的，第一个参数是分组的名字，每个分组下又包含多个 test() 来对每个功能点进行详细的测试。基于以上划分，测试逻辑和范围就很清晰了：

url.parse方法支持：

解析一般url

解析带hash的url

解析url片段

url.getParameter方法支持：

从指定url中获取查询参数

从浏览器地址中获取查询参数

当url中参数为空时

获取url参数返回值经过decode

Webstorm测试界面能看到清晰的分组：

合理的 describe() 分组和按功能细分 test() 测试对日后维护起到很关键的作用。

断言库常用接口
Jest内置Expect断言库，下面列举几个常用的断言方法就足以应付正常测试场