前端测试框架 jest 学习（二）

前端测试
, ,

jest使用“匹配器”的机制让你可以使用各种方法进行测试 这篇文档将向你介绍一些常用的匹配器

常用的匹配器

  • toBe 精准匹配测试
  • toEqual 递归检查对象或数组的每个字段。
  • toBeNull 只匹配 null
  • toBeUndefined 只匹配 undefined
  • toBeDefined 与 toBeUndefined 相反
  • toBeTruthy 匹配任何 if 语句为真
  • toBeFalsy 匹配任何 if 语句为假

还有很多参考：https://jestjs.io/zh-Hans/docs/using-matchers 或者更详细的 API 文档：https://jestjs.io/zh-Hans/docs/expect

jest 命令行工具

这里对watch模式的几个有用功能做一个简单介绍（也就是图中英文说明）：

  1. 按a键运行所有测试代码
  2. 按f键只运行所有失败的测试代码
  3. 按p键按照文件名筛选测试代码（支持正则）
  4. 按t键按照测试名筛选测试代码（支持正则）
  5. 按q键盘推出watch模式
  6. 按enter键触发一次测试运行

jest 钩子函数

jest 中常用的钩子函数有这几个

  • beforeAll：所有测试之前执行
  • afterAll：所有测试执行完之后
  • beforeEach：每个测试实例之前执行
  • afterEach：每个测试实例完成之后执行

知识补充

describe 相当于一个块，可以将一类的测试用例放在这个作用域中。在 describe 作用域中也可以使用钩子函数，不过这个钩子函数是这个作用域的函数。执行顺序为全局到局部。

only 方法，如果想单独测试某个用例，只需要使用only,其它的用例都会skipped掉，只执行这一个。

Mock 模拟函数

Mock 函数允许你测试代码之间的连接——实现方式包括：擦除函数的实际实现、捕获对函数的调用 ( 以及在这些调用中传递的参数) 、在使用 new 实例化时捕获构造函数的实例、允许测试时配置返回值。 Jest 中有三个与 Mock函数相关的API，分别是jest.fn()、jest.spyOn()、jest.mock()。使用它们创建Mock函数能够帮助我们更好的测试项目中一些逻辑较复杂的代码，例如测试函数的嵌套调用，回调函数的调用等。

Mock函数提供的以下三种特性：

  • 1、捕获函数调用情况
  • 2、设置函数返回值
  • 3、改变函数的内部实现

简单使用 Mock 函数

我们有一个简单的函数，它负责调用传递过来的回调函数。

1
2
3
4
5
const runCallback = fn => {
	fn();
};

module.exports = runCallback

如果我们想测试它是否被调用，调用了几次。就可以使用 jest.fn() 。它可以追溯函数是否被调用和调用了几次。

1
2
3
4
5
6
7
const runCallback = require("./demo");

test("测试 runCallback 函数有没有调用我们传递的回调函数", () => {
	const fn = jest.fn();
	runCallback(fn);
	expect(fn).toBeCalled();
});

简单测试一个接口

1
2
3
4
5
6
7
8
9
10
11
12
13
// demo.js
// 假设有这样一个接口
const getData = () => {
	return axios.get("/api").then(res => res.data);
};
// 用jest模拟 axios，因为我们不会真实的发送请求。
jest.mock("axios");

test.only("测试一个接口", async () => {
	axios.get.mockResolvedValueOnce({ data: "hello" });
	const result = await getData();
	expect(result).toBe("hello");
});