背景
在前端开发中，我们经常会使用 fetch 函数进行数据请求。这个函数可以使我们向服务器发送 HTTP 请求，并处理响应。但是，在进行单元测试时，我们不希望依赖服务器上的实际数据。因此，我们需要在测试中模拟数据请求。
Jest 的 Mock
Jest 是一款流行的 JavaScript 测试框架，集成了丰富的测试工具，以及 Mock 机制。Mock 是一种用于模拟测试参数或接口的技术，它可以让我们在测试中排除对外部依赖的影响。
在 Jest 中，我们可以使用 jest.fn() 方法来创建 Mock。这个方法返回一个 Mock 函数，我们可以设置它的返回值或实现方式。
请求 Mock
在测试中 Mock fetch 请求，我们需要模拟实际的请求和响应。我们可以创建一个 MockResponse 类来模拟响应：
-- -------------------- ---- ------- ----- ------------ - ----------------- ---- - --- - ----- - ------ - ---- ---------- - ---- - - ----- --------- - ----- ----------- - ------- --------------- - ----------- - ----- ------ - ------ ---------- - ----- ------ - ------ -------------------------- - -展开代码
这个类保存了响应的数据和一些基本信息。我们可以使用它来模拟各种响应情况。
接着，我们就可以按照实际应用中的方式调用请求，但是用 Mock 替代了真实的请求：
-- -------------------- ---- ------- ------------ ----- -- -- - ----- -------- - - -------- ------ ------ -- -- ---- ----- -- ------------ - ---------- -- ------------------- ----------------------- -- ----- -------- - ----- ------------ ----------------------------------- ---展开代码
这个测试案例基于一个 fetchData 函数，该函数向服务器发送请求并返回响应数据。我们通过 Mock fetch 函数返回我们自己制定的 Mock 响应，实现了真实请求的模拟。
Global Mock
我们通常会有多个用到 Mock 的测试案例。为了避免重复编写和维护相同代码，可以将 Mock 设置为全局生效的。
-- -------------------- ---- ------- ------------ -- - ------------ - ---------- -- ------------------- -------------- -------- ------ ------ --- -- --- ----------- -- - ----------------------- --- ---------- --- ----- -- -- - ----- -------- - ----- ------------ --------------------------------------- -------- --- ---------- --- ----- -- -- - ----- -------- - ----- ------------ --------------------------------------- -------- ---展开代码
在这个案例中，我们在 beforeAll 块中设置了全局的 Mock，它会在所有测试案例开始前生效。在 afterAll 块中，我们恢复了原先的 fetch 函数，确保不影响其他测试。这种方式可以避免 Mock 每个测试之前重复设置的问题。
小结
Mock 是测试中不可或缺的一部分，可以帮助我们在测试中模拟数据和接口。在 Jest 中，我们可以使用 jest.fn() 方法创建 Mock，同时也允许我们做到全局 Mock，避免代码的重复编写。
最佳实践如下：
- 创建一个
MockResponse类来模拟响应。 - 在测试中 Mock
fetch请求，返回自己制定的 Mock 响应。 - 在
beforeAll中设置全局 Mock，在afterAll中回复原先的fetch函数。
我们可以按照这个模式来编写具有高质量测试的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c4265c6e1fc40e36d023e7
