什么是 Jest?
Jest 是一个由 Facebook 开发的 JavaScript 测试框架，广泛应用于前端开发领域。Jest 支持单元测试、集成测试、快照测试等多种测试形式，可以结合 React、Angular、Vue 等多种框架进行测试。
Jest 具有以下优点：
- 简单易用：Jest 的语法简单易懂，API 清晰明了，学习成本低。
- 完整的测试环境：Jest 提供了内置的测试环境，无需额外配置。
- 内置 Mock 功能：Jest 可以轻松进行 Mock 模拟，模拟函数、对象、模块等。
- 速度快：Jest 的并行执行测试用例能够大大减少测试时间。
什么是 Mock？
在进行单元测试时，有时需要模拟数据、函数等外部依赖，以确保测试的独立性和可重复性。这时我们可以使用 Mock。
Mock（模拟）是一种技术，用于虚拟测试环境中不存在或不容易获取的内容。通过 Mock，可以使被测试代码完全独立于外部依赖，实现测试的独立性和可重复性。
Jest Mock 的基本用法
在 Jest 中进行 Mock，可以使用以下两种方式：
1. 手动 Mock
手动 Mock 是指对函数、对象等进行手动模拟，通过编写模拟代码来实现依赖注入。下面是一个手动 Mock 的示例代码：
-- -------------------- ---- ------- -- --------- ------ - ------- - ---- -------- ------ ----- --------- - -- -- - ----- ---- - ---------- -- -- --------- ---- ---- -- -- ------ ------ ----- ------- - -- -- - -- ----- ---- ---- ------ --
其中，getData 函数是一个获取数据的函数。由于 fetchData 函数依赖于 getData 函数，我们需要对其进行 Mock：
-- -------------------- ---- ------- -- ---------------- ------ ----- ------- - ---------- -- --------------------- -------- -- ------------------------ ------ - --------- - ---- ------------ ------ - ------- - ---- --------- -------------------- ------------- ----- ----------- ----- -- -- - ------------------------------- ------- ----- ------------ ----------------------------------- ---
在上面的代码中，我们在 mocks 目录下新建了一个 api.js 文件，对 getData 函数进行了模拟。在测试文件中，我们使用 jest.mock 来模拟 api 模块，然后使用 mockResolvedValue 方法来模拟返回值。最后，我们调用 fetchData 函数并对其进行断言，以确保它能够正常运行。
2. 自动 Mock
Jest 提供了一个自动 Mock 的特性，可以自动模拟依赖项，无需手动编写模拟代码。如果不需要特别复杂的 Mock 逻辑，可以考虑使用自动 Mock 功能。
-- -------------------- ---- ------- -- --------- ------ - ------- - ---- -------- ------ ----- --------- - -- -- - ----- ---- - ---------- -- -- --------- ---- ---- -- -- ------ ------ ----- ------- - -- -- - -- ----- ---- ---- ------ --
在测试文件中，通过 jest.mock 来自动 Mock api 模块：
-- -------------------- ---- ------- -- ------------------------ ------ - --------- - ---- ------------ ------ - ------- - ---- --------- -------------------- ------------- ----- ----------- ----- -- -- - ------------------------------- ------- ----- ------------ ----------------------------------- ---
通过上面的代码，我们成功地自动 Mock 了 getData 函数，测试文件中可以直接使用。
注意：自动 Mock 功能只能 Mock 模块的默认导出，对命名导出无效。
Jest Mock 的高级用法
除了基本的手动 Mock 和自动 Mock，Jest 还提供了丰富的 Mock API，支持模拟模块、类、函数、变量等多种类型的依赖项。
Mock 模块
在 Jest 中，可以使用 jest.mock 方法来模拟模块。例如，我们有一个 user.js 模块：
// user.js
import { fetchData } from './api';
export const getUser = async (id) => {
const data = await fetchData(`/users/${id}`);
// do something with data
return data;
};在测试文件中，我们可以使用 jest.mock 来 Mock。Mock 会覆盖 user.js 中的 fetchData 方法，通过调用 mockResolvedValue 来模拟返回值：
-- -------------------- ---- ------- -- ---------------------- ------ - ------- - ---- ---------- ------ - --------- - ---- --------- -------------------- ----------- ----- ----------- ----- -- -- - --------------------------------- ---- ------- ----- ---- - ----- ----------- --------------------------------------------------- -------------------------- ---- ------- ---
在上面的代码中，我们使用 jest.mock 来 Mock api 模块，然后使用 mockResolvedValue 方法来模拟返回值。最后，我们调用 getUser 函数并对其进行断言，以确保它能够正常运行。
模拟类
在 Jest 中，可以使用 jest.fn 方法来模拟类。例如，我们有一个 Animal 类：
-- -------------------- ---- -------
-- ---------
------ ----- ------ -
----------------- -
--------- - -----
-
------- -
------ -- -- - --------------
-
-在测试文件中，我们可以使用 jest.fn 来 Mock。Mock 会覆盖 Animal 类中的 speak 方法：
-- -------------------- ---- -------
-- ------------------------
------ - ------ - ---- ------------
-----------------------
---------- ----- ----------- -- -- -
----- --------- - ---------- -- ----- --------
---------------------------- -- --
------ ----------
----
----- ------ - --- --------------
------------------------------------ --------
-------------------------------------------
---在上面的代码中，我们使用 jest.mock 来 Mock Animal 类。然后，使用 mockImplementation 方法来指定 mock 对象的实现。最后，我们调用 Animal 类构造函数并对其进行断言，以确保它能够正常运行。
模拟函数
在 Jest 中，可以使用 jest.fn 方法来模拟函数。例如，我们有一个 api.js 模块，其中包含一个 fetchUser 函数：
// api.js
export const fetchUser = async (id) => {
// fetch user data from server
};在测试文件中，我们可以使用 jest.fn 来 Mock fetchUser 函数：
-- -------------------- ---- ------- -- --------------------- ------ - --------- - ---- --------- ------------- ----- ----------- ----- -- -- - ----- ------------- - ---------- -- --------------------- ---- -------- ----- ---- - ----- ----------------- ---------------------------------------------- -------------------------- ---- ------- ---
在上面的代码中，通过 jest.fn 方法来 Mock fetchUser 函数。使用 mockResolvedValue 方法来指定返回值。最后，我们调用 fetchUser 函数并对其进行断言，以确保它能够正常运行。
总结
Jest 是一个非常好用的 JavaScript 测试框架，它内置了 Mock 功能，可以轻松进行代码模拟，使得测试更加简单、快速和可靠。本文介绍了 Jest Mock 的基本用法和高级用法，希望读者能够掌握 Jest Mock 的技巧，提高代码测试的能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455be1d968c7c53b0923008