在前端开发中，我们常常需要测试异步代码。这些代码可能包括发起网络请求、处理定时器或事件等等。然而，由于异步代码的不确定性和难以追踪，测试异步代码往往是一件比较棘手的事情。在这篇文章中，我们将介绍如何使用 Jest Mock 函数来测试异步代码，以及几个需要注意的问题。
Jest Mock 函数简介
Jest Mock 函数是 Jest 提供的一种模拟函数的方式。Mock 函数可以模拟任何函数的行为，并且可以进行测试时的调用检查。使用 Mock 函数可以方便地解决一些测试中的问题，比如测试复杂的函数、解耦依赖、模拟异步行为等。
在 Jest 中，使用 Mock 函数有两种方式：
- 创建 Mock 函数
- 使用 Jest 提供的自动 Mock 功能
下面我们将一步步介绍这两种方式。
1. 手动创建 Mock 函数
手动创建 Mock 函数的方式，需要我们手工编写一个 Mock 函数，它的行为和被模拟的函数相似。创建 Mock 函数的代码如下所示：
// 创建 Mock 函数 const fn = jest.fn(); // 调用 Mock 函数 fn(); // 检查 Mock 函数是否被调用 expect(fn).toHaveBeenCalled();
我们可以将这个 Mock 函数传递给需要进行测试的函数中，来检查函数调用时，是否正确调用了 Mock 函数。
下面我们将使用手动创建 Mock 函数的方式来测试一个简单的异步函数。
示例代码
假设我们有一个异步函数 getData，它通过网络请求获取数据。我们需要测试这个函数是否正确的获取了数据并返回了它。
//getData.js async function getData() { const data = await axios.get("https://api.github.com/users/liyingxuan"); return data; }
我们可以将这个异步函数传递给测试函数中，并创建一个 Mock 函数模拟 axios.get 方法的返回值。
-- -------------------- ---- ------- ----------------- ----- ----- - ----------------- ----- ------- - --------------------- ------------- ------ ------ ------ ----- -- -- - -- -- ---- -- ----- -------- - - ----- ----- ----- -- ----- ------- - ----------------- ----------------------------------- -- -------------- ----- ------ - ----- ---------- ------------------------------ -- -- ---- ------- ----------------------------------- -- -- ---- ------- ---------------------- ---展开代码
在这个测试中，我们使用了 jest.spyOn 方法来创建了一个 Mock 函数，模拟了 axios.get 方法的返回值，然后在测试函数中调用 getData 函数，并使用 expect 断言来检查返回值和 Mock 函数是否被调用。
2. 使用 Jest 自动 Mock 功能
使用 Jest 的「自动 Mock」功能，是 Jest 提供的另一种 Mock 方法。当 Jest 检测到我们测试的模块包含外部依赖时，会自动为这些依赖创建 Mock 函数。
例如，我们有一个模块依赖 axios 模块，并使用 axios.get 方法获取数据。如果我们想要对这个模块进行测试，我们可以使用 Jest 提供的自动 Mock 功能，不需要手动创建 Mock 函数。
示例代码
//axios.js const axios = require("axios"); async function request() { const data = await axios.get("https://api.github.com/users/liyingxuan"); return data; } module.exports = { request };
这个模块 axios.js 包含了一个 axios.get 方法，并通过 request 方法将其暴露给外部调用。
我们可以在测试函数中使用 jest.mock 方法来自动 Mock axios 模块并返回预期值。然后，我们就可以调用被测试的函数并使用 expect 断言检查返回值是否符合预期。
-- -------------------- ---- ------- --------------- ----- ----- - ----------------- ----- - ------- - - ------------------- ------------------ -- -- -- ---- ------------------------------- -- ----------------- ----- ----- ----- --- ---- ------------- ------ ------ ------ ----- -- -- - ----- ------ - ----- ---------- ------------------------ ----- ----- ----- --- ---展开代码
在这个测试中，我们使用了 jest.mock 方法来自动 Mock axios 模块。在传递函数时，我们使用了 mockImplementation 方法来返回希望被测试函数获得的数据。最后，我们使用 expect 断言检查返回的值是否符合预期。
注意事项
- 在 Mock 函数中，
mockImplementation方法用于指定函数被调用时所执行的回调函数。 - Mock 函数可以用来模拟任何函数，包括异步函数和返回 promise 的函数。
- 每个测试用例都应该在测试结束前还原 Mock 函数原本的行为。
- 在模拟异步函数时，应该使用
.resolves或.rejects方法，以确保我们的异步函数被正确地包装为 promise。
总之，使用 Jest Mock 函数来测试异步代码是非常有效的。通过使用 Jest 提供的自动 Mock 或手动创建模拟函数的方式，我们可以方便地测试各种异步场景，提高我们测试的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c6a17bcf1e9924e1ee03fa
