随着现代 Web 应用程序的使用越来越广泛，GraphQL 作为一种更灵活、高效的 API 查询语言，已经被广泛采用。GraphQL 还提供了一个便捷的方式，使得前端开发者能够在单元测试中模拟 API 请求并对其进行测试。在 Jest 中，Mock 掉 GraphQL 请求是一个重要的测试技巧，下面将对其进行详细介绍和讲解。
什么是 Jest？
Jest 是 Facebook 出品的一款 JavaScript 测试框架，旨在提供一个好用、快速的测试环境。Jest 内置了测试用例之间的依赖、断言、Mock 函数等常用功能，因此它非常适合进行前端单元测试。
Mock GraphQL 请求的需求
在前端开发过程中，我们通常需要使用 GraphQL 来与后端进行数据交互。如果后端的 API 频繁变化，那么前端使用 GraphQL 就非常方便，可以自由地查询/获取/提交想要的数据。
在进行前端单元测试时，需要 Mock 掉 GraphQL 请求，这样就不必真的发出网络请求，从而加快了测试代码的执行速度。同时，我们还需要实现一个可靠的 Mock GraphQL API，以确保测试代码不会在后续版本中因为 API 相关变化而失效。
基本的 GraphQL Mock
我们可以在代码中使用 jest.mock() 函数轻松地创建一个用于 Mock 的 GraphQL 对象，例如：
-- -------------------- ---- -------
------------------------- -- -- -
----- ------------ - ----------
----- ----- - ----------
----- ------ - ----------
----- --------- - ----------
------ -
------- --- ---------------
------
-------
----------
--
---
以上代码中，我们通过 jest.fn() 创建了 ApolloClient、query、mutate 和 subscribe 这四个基本的模拟 GraphQL 对象。ApolloClient 是 GraphQL 的客户端，query 用于查询，mutate 用于提交数据，subscribe 用于订阅数据更新。通过这种方式，我们可以控制这些 GraphQL 对象的属性，并在测试中使用它们。
Mock 具体的 GraphQL 请求
现在，我们已经定义了 Mock GraphQL 对象，我们需要为测试页面创建 Mock GraphQL 请求。
-- -------------------- ---- -------
----- ----- - -
-
-------- -
------ ----
----- -------- -
-----
-
-
--
------- -
----- - ------ ------- -
-
-
--
----- ------ - --- --------------
------ --- ----------------
------
---
以上代码中，我们定义了一个名为 "mocks" 的数组，数组中包含一个对象，该对象模拟 GetHello 一条 GraphQL 请求。当服务端返回 "hello" 时，mocks 数组中的 result 会被返回，并且还可以定制化响应的数据格式。
在 Jest 中添加 Mock GraphQL
最后，我们将定义 Mock GraphQL 的代码加入到 Jest 的配置文件中。
-- -------------------- ---- -------
-------------- - -
------- ----------------------
------------------- --------------------------
---------- -
---------------------- ---------
--
----------------- -
-------------- -----------------------
-------------- -------------------------------
--
-------- -
---------- -
--------- -------------------------------
-------------------------- -----------------
---------------- --------------------------------------------------------------------------
------------ -
---------- ---------------------
------------ --------
--
---------- -
--------- -
-
--
-- -- ---- -------
----------------- ---
--
---------- -----------------
----------------------- -------------------
---------- -
----------
-------------- -
---------------- ----------------------
----------- ------------------
--
-
--
以上是 Jest 的一个配置示例，我们在其中添加了 APOLLO_MOCKS 这个变量，用来存储我们的 Mock GraphQL 后端接口。
// 在测试函数开始的时候，加载 Mock GraphQL
beforeEach(() => {
__APOLLO_MOCKS__ = client; // 此处的client是刚生成的ApolloClient对象
});当我们在测试代码中引用这个变量时，就可以获取到我们定义的 Mock GraphQL 数据。
总结
在 Jest 中 Mock 掉 GraphQL 请求是一种非常重要的单元测试技巧。通过 Mock GraphQL，我们可以有效降低测试用例的运行时间，并且可以消除不必要的网络请求。另外，在测试代码中添加正确的 Mock GraphQL 对象，也可以保证测试代码的可靠性。
希望这篇文章可以帮助你掌握 Jest 中 Mock GraphQL 的技巧，以致于在进行前端单元测试时能够事半功倍。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a75937add4f0e0ff05d836