GraphQL 是一种针对 API 的查询语言，它提供了一种更有效、强大且灵活的方式来构建 API。基于 GraphQL 的服务具有清晰的数据约定，因此相比于传统的 RESTful API 更易于维护和迭代。在前端开发中，我们通常会使用 GraphQL 与后端进行数据交互。当我们对 API 进行修改时，我们需要确保我们的重构不会对前端在使用 API 时产生任何问题，这时就需要进行测试了。
在本篇文章中，我们将介绍如何使用 Mocha 对 GraphQL 进行测试。我们将首先介绍 Mocha 的基础知识，然后介绍如何使用 Mocha 进行 GraphQL 测试、如何模拟数据和如何使用 Mochawesome 进行测试报告生成。
Mocha 基础知识
Mocha 是一个功能齐全、灵活的 JavaScript 测试框架，支持运行在浏览器和 Node.js 环境下。Mocha 可以与多种断言库协作使用，如 chai、assert 和 should。Mocha 提供了非常完善的功能，例如异步测试、监视模式、测试报告生成等等。
安装 Mocha
首先，我们需要全局安装 Mocha。
npm install -g mocha
创建测试文件
接下来，我们创建一个测试文件夹：test，并在其中创建测试文件 graphql.test.js。
mkdir test touch test/graphql.test.js
编写测试用例
我们可以使用 describe 和 it 函数来编写测试用例。describe 函数用于定义测试套件，可以包含多个测试用例。it 函数用于定义测试用例。我们可以在 it 函数中使用断言库来验证预期结果是否与实际结果一致。下面是一个简单的示例：
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal([1,2,3].indexOf(4), -1);
});
});
});在测试 GraphQL 时，我们可以使用类似上面的示例，但需要创建 GraphQL 客户端并使用客户端查询我们的 API。我们将使用 graphql-request 库来创建 GraphQL 客户端。我们也需要创建测试用例前设置服务器。
设置服务器
我们将使用 express-graphql 启动 GraphQL 服务器。以下是实现此功能的示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- - ----------- - - -------------------
-- --------- - ------- ----- ------- ------ --------
----- ------ - -------------
---- ----- -
------ ------
-
---
-- --- ---- -------- - -------- -------- --- ---- --- --------
----- ---- - -
------ -- -- -
------ ------ --------
--
--
----- --- - ----------
--------
-----------
-------------
------- -------
---------- -----
--------- -----
--
--
---------------- -- -- ---------------- ------ -- ---------------------------------创建 GraphQL 客户端
在测试 GraphQL API 时，我们需要创建一个 GraphQL 客户端来向服务器发出请求。我们将使用 graphql-request 库来创建客户端。
-- -------------------- ---- -------
----- - ------- - - ---------------------------
----- -------- - --------------------------------
----- ----- - -
-
-----
-
--
----------------- ------------------ -- -------------------在上述示例中，我们使用 request 函数创建了一个 GraphQL 客户端，并使用 endpoint 执行了一个简单的查询。
创建一个简单的测试用例
下面让我们通过一个简单的测试用例来了解如何使用 Mocha 对 GraphQL 进行测试。我们编写一个测试用例，查询 hello 字段并验证返回值是否正确。
-- -------------------- ---- -------
----- - ------ - - ----------------
----- - ------- - - ---------------------------
----- -------- - --------------------------------
----------------- -- -- -
---------- ------ ----- ------- ----- -- -- -
----- ----- - -
-
-----
-
--
----- ---- - ----- ----------------- -------
---------------------------------- ---------
---
---在上面的测试用例中，我们使用 expect 函数来验证返回值是否等于 'Hello world!'。在代码中，我们使用 async 和 await 关键字来异步执行查询。
模拟数据
有时我们需要在测试中使用特定的测试数据，这时我们可以使用 graphql-tools 库中的 addMockFunctionsToSchema 方法来模拟数据。该方法将在 GraphQL Schema 上添加模拟函数，并将其用作数据源。下面是一个简单的示例。
-- -------------------- ---- -------
----- - ------- - - -------------------
----- - ------------------------- -------------------- - - -------------------------
----- -------- - -
---- ----- -
------ ------
-
--
----- ------ - ---------------------- -------- ---
-------------------------- ------ ---
--------------- -- ----- ------------------- -- -----------------------在上面的示例中，我们使用 makeExecutableSchema 函数创建一个简单的 Schema，然后使用 addMockFunctionsToSchema 方法添加一个模拟函数，并使用 graphql 函数对 'hello' 查询进行了验证。
除了 addMockFunctionsToSchema，还有很多其他的 Mock 库，例如 mockingoose，它可以用于模拟返回值并与 Mocha 一起使用，以实现有效的测试。
使用 Mochawesome 生成测试报告
Mochawesome 是一个漂亮的 HTML 报告生成工具，可以提供测试的详细信息和统计指标。它还提供了简单的配置选项，例如输出位置和文件名。下面是简单示例。
-- -------------------- ---- -------
----- ----- - -----------------
----- ----------- - ----------------------------------------
----- ----- - --- -------
--------- --------------
---------------- -
---------- ----------------------
--------------- --------
--------- -----
--
---
--------------------------------------
-------------------- -- -
-- -------- --- ------
--------------------------
------- -----
---------- ----------------------
--------------- --------
---
---在上述示例中，我们使用 mochawesome-report-generator 生成测试报告，并将其输出到报告目录中。在 reporterOptions 中，我们可以定义报告的输出信息。
结论
在本篇文章中，我们介绍了如何使用 Mocha 执行 GraphQL 测试，并使用 graphql-request 库执行查询。我们还讨论了如何使用 addMockFunctionsToSchema 模拟数据。最后，我们介绍了如何使用 Mochawesome 生成漂亮的 HTML 报告。我们希望这篇文章对开发人员有所帮助，并提升了对 GraphQL 测试的理解和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6732b40d0bc820c5823e6857