随着前端技术的发展，React 和 GraphQL 成为了越来越受欢迎的技术。但是，在开发应用的过程中，测试是必不可少的一环。本文将介绍使用 Jest 测试 React 和 GraphQL 应用的最佳实践，帮助开发者更好地进行测试。
Jest 简介
Jest 是一个由 Facebook 开发的 JavaScript 测试框架，专门用于测试 React 应用。它具有易于使用、快速执行、自动化测试和覆盖率报告等特点。此外，Jest 还支持使用 Babel、TypeScript 和 Flow 等语言进行测试，使得开发者可以使用最新的 JavaScript 技术进行测试。
React 测试
安装 Jest
首先，我们需要在项目中安装 Jest。使用以下命令：
npm install --save-dev jest
编写测试用例
在编写测试用例之前，我们需要了解一些 React 测试的基础知识。
React 组件有两种类型：无状态组件和有状态组件。无状态组件只是简单地渲染一些内容，而有状态组件则包含了一些状态和生命周期方法。在测试组件时，我们需要分别对这两种组件进行测试。
无状态组件测试
无状态组件测试非常简单。我们只需要渲染组件并检查其输出是否正确即可。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ ----------- ---- ---------------- ------------- --- ------- ------ -- -- - ----- - --------- - - ------------------- ------------ ------- ---- ----- ----------- - ----------------- ---------- ---------------------------------------- ---
在这个测试用例中，我们使用了 render 函数来渲染 MyComponent 组件，并使用 getByText 函数来获取包含指定文本的元素。然后，我们使用 expect 函数来断言文本元素是否存在于文档中。
有状态组件测试
有状态组件测试需要更多的工作。我们需要模拟组件的状态和生命周期方法，并检查组件的输出是否正确。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ ----------- ---- ---------------- ------------- --- ------- ------ -- -- - ----- - --------- - - ------------------- ---- ----- ----------- - ------------------ --------- ---------------------------------------- --------------------------------- --------- ----- ------------------ - ------------------ --------- ----------------------------------------------- ---
在这个测试用例中，我们使用了 fireEvent 函数来模拟用户的点击事件，从而触发组件的状态更新。然后，我们使用 expect 函数来断言更新后的文本元素是否存在于文档中。
运行测试
完成测试用例的编写后，我们可以使用以下命令来运行测试：
npm test
Jest 将自动查找项目中的测试文件，并执行其中的测试用例。测试结果将显示在控制台中。
GraphQL 测试
安装依赖
在测试 GraphQL 应用之前，我们需要安装一些依赖项。使用以下命令：
npm install --save-dev graphql graphql-tag jest-graphql-mock
graphql 和 graphql-tag 是用于处理 GraphQL 请求和响应的库，jest-graphql-mock 则是用于模拟 GraphQL API 的库。
编写测试用例
在编写测试用例之前，我们需要了解一些 GraphQL 测试的基础知识。
GraphQL 有三个核心概念：查询、变更和订阅。查询用于获取数据，变更用于修改数据，订阅用于实时获取数据。在测试 GraphQL 应用时，我们需要分别对这三个概念进行测试。
查询测试
查询测试用于测试 GraphQL 查询的正确性。我们需要模拟一个 GraphQL 查询，并检查其返回的数据是否正确。
-- -------------------- ---- -------
------ - ---------------- - ---- ------------------------
------ - ------------- --- - ---- ----------------
------ - ----------- - ---- ----------
------ - ------- - ---- ----------
------ - -------------------- - ---- ----------------
------ - ---------- - ---- --------------------
----- -------- - ----
---- ----- -
------ ------
-
--
----- --------- - -
------ -
------ -- -- ------- --------
--
--
----- ------ - ----------------------
---------
----------
---
------------- --- ------- ------ ----- -- -- -
----- ---- - ---------------------
------------------- -- -- -- ------ ------- ------- ----
----- - ---- - - ----- ------------- ----- ----
---------------------------------- ---------
---在这个测试用例中，我们使用了 mockServer 函数来创建一个 GraphQL API 的模拟器。然后，我们使用 mock.query 函数来定义一个 hello 查询，并返回 Hello, World!。最后，我们使用 mock.query 函数来执行查询，检查其返回的数据是否正确。
变更测试
变更测试用于测试 GraphQL 变更的正确性。我们需要模拟一个 GraphQL 变更，并检查其修改的数据是否正确。
-- -------------------- ---- -------
------ - ---------------- - ---- ------------------------
------ - ------------- --- - ---- ----------------
------ - ----------- - ---- ----------
------ - ------- - ---- ----------
------ - -------------------- - ---- ----------------
------ - ---------- - ---- --------------------
----- -------- - ----
---- ----- -
------ ------
-
---- -------- -
----------------- --------- ------
-
--
----- --------- - -
------ -
------ -- -- ------- --------
--
--------- -
------------ --- - ---- -- -- -----
--
--
----- ------ - ----------------------
---------
----------
---
------------- --- ------- ------ ----- -- -- -
----- ---- - ---------------------
---------------------------- --- - ---- -- -- ------
----- - ---- - - ----- ------------
-------- -
----------------- -------- ------
-
---
----------------------------------------- -------
---在这个测试用例中，我们使用了 mock.mutation 函数来定义一个 updateHello 变更，并返回传入的 text。然后，我们使用 mock.query 函数来执行变更，检查其修改的数据是否正确。
运行测试
完成测试用例的编写后，我们可以使用以下命令来运行测试：
npm test
Jest 将自动查找项目中的测试文件，并执行其中的测试用例。测试结果将显示在控制台中。
总结
本文介绍了使用 Jest 测试 React 和 GraphQL 应用的最佳实践。在 React 测试中，我们需要分别测试无状态组件和有状态组件。在 GraphQL 测试中，我们需要分别测试查询、变更和订阅。使用以上技术，我们可以更好地进行应用的测试，保证应用的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657336d1d2f5e1655dc54695