前言
在前端开发过程中，测试是非常重要的环节。而针对后端接口的测试，我们常常会用到 Mock 数据。但是随着 GraphQL 的流行，传统的 Mock 数据并不适用于 GraphQL。因为 GraphQL 是一种强类型的数据传输语言，它需要我们根据 Schema 去定义数据结构，从而进行合理的 GraphQL Query 或 Mutation。这使得我们需要定制 Mock 数据以便测试 GraphQL。
在本文章中，我们将介绍如何在 Cypress 中使用一种 GraphQL Mock 库来进行前端测试。该 Mock 库是基于 Apollo 提供的 @apollo/client/testing 库，结合 Cypress 的网络拦截和 Mock 功能，可以在页面内进行 GraphQL 的 Mock 数据测试。
安装
Cypress 是一个端到端的前端测试工具，我们需要先安装 Cypress。你可以在 Cypress 的网站上找到安装指南。安装完成后，我们需要再安装以下几个库：
npm install -D apollo-cache @apollo/client graphql cypress-graphql-mock
GraphQL Schema
-- -------------------- ---- ------- ---- ----- - -------- ----- ---- - ---- -------- - ------------- -------- ------ --------- ---- - ---- ---- - --- --- ----- ------- ------ ------- -
以上是 GraphQL Schema，在测试时我们需要提供 Mock 数据来模拟上述结构。这里我们只提供了最基本的 Schema，你可以根据自己的需要修改、添加字段。
测试代码
我们会写两个测试，一个测试 GET 请求，一个测试 POST 请求。每个测试都会模拟 GraphQL 请求，并返回模拟数据进行测试。
GET 请求：
-- -------------------- ---- -------
------ - ------------------------- -------------------- - ---- ---------------
------ - -------------- - ---- ------------------------
----- ------------- - -- -- -
----- ------ - ---------------------- --------- ---------- --
-------------------------- ------ --
------ ------
-
------------- ------- -- -- -
------------- -- -
-----------
-------------------------- ----- -- -
--------------- -- -
----- - ------------- - - --------
----- ------ - ---------------
----- ---- - ----------------
-------
---------- ------------------
--
------ ----
----------------------- -------------------
-------------- -- -
----------------
--
--
--
--
---------- --- - ---- -- ---- -- -- -
----- ------ - ---
----- ---- - -----
----- ----- - ---------------
------------------------------
----------------------------------------------------- -----
------------------------------------------------------ ------
--
--测试流程：
- 使用
makeExecutableSchema创建 Schema。 - 使用
addMockFunctionsToSchema对 Schema 添加 Mock 数据。 - 使用
mockSingleLink创建一个支持 Mock 的 Link 对象。 - 使用 Cypress 的拦截功能拦截 GET 请求（正则表达式匹配任何包含 ".graphql" 的请求地址），并返回 Mock 数据。
- 访问页面中包含用户 ID 的地址。
- 使用
link.request方法向 Schema 发起查询请求，并返回 Mock 数据。 - 检查页面中展示出的结果是否与 Mock 数据一致。
POST 请求：
-- -------------------- ---- -------
-------------- ---------- -- -- -
------------- -- -
-----------
-------------------------- ----- -- -
--------------- -- -
----- - ------------- - - --------
----- ------ - ---------------
----- ---- - ----------------
-------
---------- ------------------
--
------ ----
----------------------- -------------------
-------------- -- -
----------------
--
--
--
--
---------- --- - --- ------ -- -- -
----- ---- - -----
----- ----- - ---------------
-------------
----------------------------------------------------
------------------------------------------------------
-------------------------------------------------
----------------------------------------------------- -----
------------------------------------------------------ ------
--
--测试流程：
- 使用 Cypress 的拦截功能拦截 POST 请求，并返回 Mock 数据。
- 访问页面并输入要添加的用户信息。
- 模拟点击添加用户的按钮。
- 检查页面中新增用户的信息是否与 Mock 数据一致。
结论
通过以上测试，我们可以初步了解 Cypress 集成 GraphQL Mock 实现前端测试的方法。除上述测试之外，我们还可以扩展测试范围，比如：
- 重复添加用户测试
- 非法输入测试
- 查询用户不存在测试
给你的测试套件增加 GraphQL 测试是值得的。Cypress 结合 GraphQL Mock 库可以让前端测试更加强大和全面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3a24af40ec5a964e3e04a