单元测试是前端开发中不可或缺的一部分，它可以让我们更快速地发现代码中的问题，提高代码的可维护性和可扩展性。而 Jest 是一款非常流行的 JavaScript 测试框架，它提供了很多强大的功能，其中 Mock 是其中的一个重要部分。在本文中，我们将介绍 Jest Mock 的使用技巧，希望可以为大家在单元测试中提供些许帮助。
Jest Mock 是什么？
Jest Mock 指的是模拟函数的行为，将所依赖的函数替换为另一个我们自己定义的函数，从而在测试中更容易地控制函数的行为。通常情况下，Mock 函数是空函数，其返回值为 undefined。当我们需要在测试中根据不同的情况返回不同的值时，我们可以利用 Jest Mock 来实现。
Mock 函数的基本使用
我们通过一个简单的例子来了解 Jest Mock 的基本使用。假设我们有一个函数 add，它是一个加法函数，其代码如下所示：
function add(a, b) {
return a + b;
}我们可以使用 Jest Mock 来替换这个函数，代码如下所示：
const add = jest.fn();
替换后的 add 的返回值为 undefined，我们希望在测试中获取正确的返回值，我们可以使用 mockReturnValue 来实现，代码如下所示：
add.mockReturnValue(3);
意思是，当我们在测试中调用 add 函数时，它会返回 3。完整的代码如下所示：
const add = jest.fn();
add.mockReturnValue(3);
test('add function should return 3', () => {
expect(add(1, 2)).toBe(3);
});使用 Jest Mock 来模拟数据
有时候我们需要在单元测试中使用一些假数据，而这些假数据并不方便直接获取。这时，我们可以使用 Jest Mock 来模拟这些数据。例如，在我们的项目中有一个使用 fetch 请求 API 数据的函数，代码如下所示：
import fetch from 'node-fetch';
async function fetchAPI(url) {
const response = await fetch(url);
const data = await response.json();
return data;
}我们可以使用 Jest Mock 来模拟这个函数，代码如下所示：
-- -------------------- ---- -------
------ ----- ---- -------------
------------------------
------------ ------ ---- ------ ----- -- -- -
----- -------- - - -------- ------ ------ --
-------------------------
----- -- -- --------------------------
---
----- ---- - ----- ---------------------------------------
-------------------------------
---在测试代码中，我们使用 jest.mock 来模拟 node-fetch 模块，然后我们使用 fetch.mockResolvedValue 来模拟这个 fetch 请求，返回我们自己定义的假数据。
使用 Jest Mock 来测试异步代码
在测试异步代码时，我们经常需要使用 Jest Mock 来模拟异步函数的返回值。假设我们有这样一个异步函数：
async function fetchData() {
const response = await fetch('https://api.github.com/users');
const data = await response.json();
return data;
}我们可以使用 Jest Mock 来测试它的返回值，代码如下所示：
-- -------------------- ---- -------
------ ----- ---- -------------
------------------------
------------ ------ ---- ---- -------- ----- -- -- -
----- -------- - -- ----- -------- --------- ------- ---
-------------------------
----- -- -- --------------------------
---
----- ---- - ----- ------------
-------------------------------
---在这个示例中，我们使用 fetch.mockResolvedValue 来模拟我们想要的返回值。这里我们使用了 Promise，Jest 能够自动处理 Promise，所以我们不需要手动添加异步代码。如果您要模拟一些异步代码，您需要使用 Jest 提供的 done 参数来告诉 Jest 这是一段异步代码。
使用 Jest Mock 来测试函数的调用
Jest Mock 还可以用来测试函数的调用情况，以确保函数的实际调用情况符合我们的预期。例如，我们有一个 login 函数，它需要调用 fetchAPI 函数来获取用户信息，代码如下所示：
-- -------------------- ---- -------
------ -------- ---- -------------
----- -------- --------------- --------- -
----- ---- - ----- ---------------------- - --------- -------- ---
-- ----- -- ------------- -
------ - -------- ---- --
- ---- -
----- --- ------------ -------
-
-我们可以使用 Jest Mock 来测试 fetchAPI 函数是否被正确调用了。代码如下所示：
-- -------------------- ---- -------
------ -------- ---- -------------
------ ----- ---- ----------
------------------------
------------ ---- -------- ---- ------- -------- ----- -- -- -
----- -------- - - -------- ---- --
-----------------------------------------
----- ------------- ----------
------------------------------------------
--------------------------------------------------- -
--------- -------
--------- ---------
---
---在测试代码中，我们使用 jest.mock 来模拟 fetchAPI 函数，使用 fetchAPI.mockResolvedValueOnce 来模拟函数的返回值。最后，我们使用 expect 语法来检查函数的调用情况是否符合预期，如果符合则测试通过。
总结
Jest Mock 是 Jest 测试框架非常重要的一个功能，它可以方便地模拟函数的行为，让我们在测试中更容易地控制函数的行为，并通过 Mock 函数来测试异步代码和函数的调用情况。我们在使用 Jest Mock 时需要注意一些细节，例如使用 mockResolvedValue 来模拟异步请求、使用 done 来通知 Jest 异步代码已结束，这样可以使我们的单元测试更加稳定和可靠。
以上是关于 Jest Mock 的使用技巧的一些介绍，希望能对大家在单元测试中使用 Jest 提供一些帮助，并提高我们代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a5144448841e9894185dd7
