跳到主要内容位置

Jest 入门教程

Jest 是什么?

Jest 是用于测试 JavaScript 应用程序的框架,由 Meta,也就是 Facebook 维护,能用于测试 Node.js、TypeScript、React、Vue 等项目。

测试是什么?

那么什么是测试呢?测试意思就是检查代码的执行是否符合预期。

为什么需要测试

我们程序员在编写代码的时候,必然会出现错误,通过测试,我们可以:

  • 在早期就发现可能得错误和缺陷。
  • 保证程序正常的运行。
  • 后期在修改代码时,确保结果仍然符合预期。

测试的分类

测试大体上可以分为:

  • 单元测试,最简单的测试,经常用于测试单个函数,例如一个组件,给它特定的参数能返回特定的结果。
  • 集成测试,比单元测试更复杂,需要处理依赖关系,例如某个功能涉及多个函数调用。
  • 端到端测试,测试程序和用户交互的流程,例如输入文本,得到预期的结果。
  • UI 测试,属于前端重点的测试,用于测试页面视图显示正常,功能正确,并且性能符合预期,多数属于人工测试。

等等。

为什么使用 Jest

如果项目是使用 JavaScript 编写的,那么使用 Jest 框架就能够帮我们实现自动化的测试,不用再人工或者编写 console.log 来测试了,只需要运行一条命令,就能够跑完所有测试,节省时间和人力。

如何使用 Jest

接下来,我们看一下 Jest 框架本身的用法。 安装到项目的测试依赖中:

yarn add --dev jest

入门

测试 sum.js 中的函数:

function sum(a, b) {
return a + b;
}

module.exports = sum;

sum.test.js,导入 sum,使用 test 函数,第 1 个参数编写测试描述,第二个参数编写测试代码。expect() 用于执行 JS 表达式,之后可以调用它内置的判断方法来检测结果,例如 toBe() 判断是否相等:

const sum = require("./sum");

test("1 + 2 = 3", () => {
expect(sum(1, 2)).toBe(3);
});

在 package.json 中添加 test script:

  "scripts": {
"test": "jest --coverage"
},

运行:

yarn test

toEqual

addToArray.js:

function addToArray(arr, ...args) {
arr.push(...args);
}
module.exports = addToArray;

addToArray.test.js:

  • toBe 是不行的,严格相等
  • toEqual 可以
  • 可以连续使用,例如 .not.toBe,不相等
const addToArray = require("./addToArray");

test("添加元素 4, 5, 6 到数组 [1, 2, 3] 中", () => {
const arr = [1, 2, 3];
addToArray(arr, 4, 5, 6);
// expect(arr).toBe([1, 2, 3, 4, 5, 6]);
// expect(arr).toEqual([1, 2, 3, 4, 5, 6]);
expect(arr).not.toEqual([1, 2, 3]);
});

mock 函数

用于测试无需知道函数具体实现的代码。 map.js,封装了一下 array 的 map 方法,接收回调函数:

function map(arr, cb) {
return arr.map(cb);
}

module.exports = map;

要测试回调函数正常运行,我们需要对它进行 mock,之后可以通过 mock 函数的属性来获取测试的信息,例如,对于数组 [1,2,3],确保 map 的回调函数执行了 3 次:

test("map [1, 2, 3], 回调函数执行 3 次", () => {
const mockFn = jest.fn((x) => x * 2);
map([1, 2, 3], mockFn);
expect(mockFn.mock.calls.length).toBe(3);
});

或者测试每次回调函数的返回结果,对于 [1,2,3] 这个数组,每次应该返回 2,4,6:

test("map [1, 2, 3], 回调函数返回 2, 4, 6", () => {
const mockFn = jest.fn((x) => x * 2);
map([1, 2, 3], mockFn);
expect(mockFn.mock.results[0].value).toBe(2);
expect(mockFn.mock.results[1].value).toBe(4);
expect(mockFn.mock.results[2].value).toBe(6);
});

测试分组

这里提一下, jest 可以把相关的 test 进行分组,可以使用 describe 函数,参数 1 为描述,参数 2 为回调函数,里边是相关的 test 集合:

describe("测试 map 回调函数执行情况", () => {
test("map [1, 2, 3], 回调函数执行 3 次", () => {
const mockFn = jest.fn((x) => x * 2);
map([1, 2, 3], mockFn);
expect(mockFn.mock.calls.length).toBe(3);
});

test("map [1, 2, 3], 回调函数返回 2, 4, 6", () => {
const mockFn = jest.fn((x) => x * 2);
map([1, 2, 3], mockFn);
expect(mockFn.mock.results[0].value).toBe(2);
expect(mockFn.mock.results[1].value).toBe(4);
expect(mockFn.mock.results[2].value).toBe(6);
});
});

coverage

对于测试来说,代码的覆盖率也是一个重要的指标,通常情况下要达到 100%,也就是对所有的代码都进行了测试。 我们可以给 jest 命令加上 --coverage 参数来查看覆盖情况:

"scripts": {
"test": "jest --coverage"
},

运行之后会在命令行显示覆盖率,我们这里是 100% 覆盖了,同时它也会生成网页版的结果,可以在生成的 coverage 目录里找到。 这时,我们修改一下 sum.test.js,去掉 sum 函数的导入和调用:

test("1 + 2 = 3", () => {
expect(1 + 1).toBe(2);
});

这个时候就可以看到覆盖率不是 100% 了。

小结

好了,这个就是软件测试的一些相关概念,以及 Jest 框架本身的一些用法。你学会了吗?如果有帮助请三连并关注,想学更多的开发知识,可以在评论区留言,感谢观看!

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买