本文介绍如何使用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断言库,下面列举几个常用的断言方法就足以应付正常测试场