引言
Jest 是一款流行的 JavaScript 测试框架，它提供了一套完整的测试工具，例如断言、测试运行、代码覆盖率报告等。在前端开发中，我们常常需要对组件进行单元测试，而使用 Jest 可以较为方便地完成测试相关的任务。
在实际的测试中，我们常常需要用到 Mocks（模拟），以替代被测试的代码中的某些功能。本文将介绍如何在 Jest 中使用 Mocks 实现单元测试。
开始 Mock
首先，我们需要知道 Jest 中提供的 Mocks 类型。Jest 允许我们 Mock 模块，需要 Mock 其他模块时，可以使用以下 3 种类型的 Mocks：
- 手动 Mock 模块：手写模拟代码。
- 自动 Mock 模块：自动 Mock 模块的模拟代码。
- 模拟模块：通过 Jest 在运行测试时生成模拟代码。
以下将分别对这三种方式进行详细介绍：
手动 Mock 模块
手动 Mock 模块是一种常见的 Mock 方式，它允许我们手写模拟代码。例如，我们有一个登录组件，它需要调用一个 login 方法，该方法返回一个 Promise。我们可以 Mock 掉这个 login 方法，使其返回一个成功的 Promise 对象，而不用实际向服务器进行登录。
-- -------------------- ---- -------
-- --------
------ ------- ----- ----- -
----- --------------- --------- -
----- -------- - ----- ------------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- --------- -------- ---
---
------ ----------------
-
-
-- -------------
------ ----- ---- ----------
----------- ------ --------- ----- -- -- -
----- ----- - --- --------
----------- - ----------------------------- -------- ---- --- -- -- ---- --
----- ------ - ----- ------------------- ------------
----------------------------------
---在上述代码中，我们使用了 jest.fn() 方法来创建一个 Mock 函数，它可以 Mock 掉一个模块中的函数，并返回一个空实现。而 mockResolvedValue 方法可以设置该函数的返回值为一个成功的 Promise 对象。
自动 Mock 模块
自动 Mock 模块是 Jest 中一种自动生成 Mock 代码的方式，它可以 Mock 掉需要被测试模块中的一些实现细节。例如，我们有一个 fetchData 函数：
// utilities.js
export async function fetchData() {
return await fetch('/api/data').then(response => response.json());
}在测试 fetchData 函数时，我们可以使用自动 Mock 模块来 Mock 掉 fetch 函数的实现，使其返回一个 Promise 对象：
-- -------------------- ---- ------- -- ----------------- ------ - --------- - ---- -------------- ------------------------ -- -- -- ----------- ----- ---------- ---------- ---- --------------- ------ --------- ----- -- -- - ----- ------- - - ----- ------ -- ----- -------- - - ----- -- -- ------------------------ -- -------------------------------------- ----- ------ - ----- ------------ -------------------------------- ---
在上述代码中，我们通过 jest.mock() 方法实现了自动 Mock 模块。在 Mock 的时候，我们通过返回一个与原来模块接口一致的 Object，并修改其中的实现细节。
模拟模块
使用模拟模块能够 Mock 掉一些 npm 模块、内置模块等，屏蔽外部的影响。例如，我们有一个需要使用 moment.js 模块的组件：
// Hello.js
import React from 'react';
import moment from 'moment';
export default function Hello() {
return <div>{moment().format('YYYY-MM-DD')}</div>;
}在测试 Hello 组件时，我们可以使用模拟模块来 Mock 掉 moment.js 模块：
-- -------------------- ---- ------- -- ------------- ------ ----- ---- -------- ------ ------ ---- --------- ------ - ------- - ---- --------- ------ ----- ---- ---------- ------------------- -- -- -- -- -- ------- -- -- ------------- ---- ----------- ------- ------ -- -- - ----- ------- - -------------- ---- -------------------------------------------------------------- ---
在上述代码中，我们使用了 jest.mock() 方法将 moment.js 模块 Mock 掉，并返回了一个 Mocked 函数。而 () => ({}) 中的 () 是必须的，因为 moment.js 是一个类，需要在创建 Mock 对象的时候使用。
结论
本文介绍了 Jest 中 Mocks 的使用方法，其中包含了手动 Mock 模块、自动 Mock 模块和模拟模块三种方式。根据需要灵活使用 Jest 提供的 Mock 工具可以更加方便地实现单元测试。
在使用 Mocks 测试时，需要注意以下几点：
- 避免不必要的 Mocks，保证代码测试的覆盖率和正确性。
- 不可过度使用 Mocks，以避免把 Mocks 当作一种解决问题的方式，出现不必要的问题。
- 注意 Mock 的级别，以确保不影响测试结果的准确性。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6721a3892e7021665e084ec8