使用 Jest 测试使用 Apollo 的 GraphQL 应用

阅读时长 5 分钟读完

本文将介绍如何使用 Jest 测试使用 Apollo 的 GraphQL 应用。GraphQL 是一种 API 查询语言,它可以让客户端精确地请求需要的数据,避免了传统 REST API 中可能存在的数据冗余和传输过多的问题。而对于前端工程师来说,测试可以帮助我们保持代码质量和稳定性,同时也能让我们更好地理解应用程序的工作方式。

准备工作

在开始写测试用例之前,我们需要先做好一些准备工作。首先,确保你已经安装了 Jest 和 Apollo-Boost。如果没有,请运行以下命令进行安装:

接着,在项目的根目录下创建一个名为 jest.config.js 的文件,并在其中添加以下配置:

-- -------------------- ---- -------
-------------- - -
  ------- ----------
  ---------------- -------
  ----------------- -
    ----------- -------------------
  --
  ---------- -
    ------------ ----------
  --
  ---------------- -----
  ------------------ -----------
  ------------------ -
    -------
    ------
  --
  --------------------- -
    -----
    -----
    ------
  --
  ------------------ -
    ---------------
    -----
  -
--
展开代码

这里的配置项包括:

  • preset:使用 TypeScript 来进行测试
  • testEnvironment:使用 Node.js 作为测试环境
  • moduleNameMapper:将 @/ 作为项目的根路径,方便引入文件
  • transform:使用 Jest 自带的 ts-jest 转换 TypeScript 代码
  • collectCoverage:是否使用覆盖率收集
  • coverageDirectory:期望的存储覆盖率文件的文件夹
  • coverageReporters:期望的收集覆盖率报告类型
  • moduleFileExtensions:模块解析时期望解析的文件扩展名
  • moduleDirectories:模块解析时期望搜索的目录

编写测试用例

接下来,我们可以开始编写测试用例了。假设我们有一个 GraphQL 查询,它请求所有用户信息的列表:

我们需要测试的是一个带有 Apollo 的 React 组件,它会将该 GraphQL 查询发送到服务器并响应数据。我们可以通过以下代码进行测试:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------- - ---- -------------------------
------ - -------------- - ---- ----------------------
------ - ------------ - ---- ---------------
------ - ------------- - ---- ------------------------
------ - -------- - ---- -------------------
------ -------- ---- ------------------------

-- -- -------- -----
----- ------ - --- --------------
  ------ --- ----------------
  ----- --- ----------
    -
      -------- -
        ------ ----
          ----- -
            ----- -
              --
              ----
              ---
            -
          -
        --
      --
      ------- -
        ----- -
          ------ -
            - --- -- ----- ------- ---- -- --
            - --- -- ----- ------- ---- -- --
          --
        --
      --
    --
  ---
---

-- -------- ----- ------
------------ -- -
  ----------
---

-------------------- -- -- -
  ----------- ---- ------ ----- -- -- -
    ----- - ---------- - - -------
      --------------- ----------------
        --------- --
      ------------------
    --

    ----- --------- - ----- -------------------
    ----- --------- - ----- -------------------

    ---------------------------------
    ---------------------------------
  ---
---
展开代码

上述测试用例使用了 Apollo 的 MockLink,它可以模拟一个响应。测试用例首先创建客户端,然后使用 render 函数渲染 React 组件,在组件中使用 ApolloProvider 提供客户端。最后,它使用 findByText 函数在渲染后的 HTML 中查找用户的姓名,并使用 Jest 的 expect 函数判断结果是否正确。

结论

通过本文,我们了解了如何使用 Jest 测试使用 Apollo 的 GraphQL 应用。测试是一项非常重要的工作,它可以帮助我们在开发过程中保持代码的质量和稳定性。同时,也可以让我们更好地理解应用程序的工作方式。最后,希望大家能够在实际开发中充分利用这些知识,打造更好的应用程序。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/672f9c6ceedcc8a97c8f81a0

纠错
反馈

纠错反馈