如何在 Jest 中测试 GraphQL 应用

GraphQL 是一种用于 API 的查询语言，它提供了一种更加高效、强大和灵活的方式来获取数据。在前端开发中，我们经常使用 GraphQL 来获取数据，但是如何在 Jest 中测试 GraphQL 应用呢？本文将为您提供详细的指导和示例代码。

安装依赖

在开始测试之前，我们需要安装一些必要的依赖。首先，我们需要安装 graphql 和 graphql-tag：

npm install --save graphql graphql-tag

接下来，我们需要安装 jest 和 jest-graphql-mock：

npm install --save-dev jest jest-graphql-mock

jest-graphql-mock 是一个 Jest 插件，它提供了一些用于模拟 GraphQL 查询和响应的工具。

编写测试用例

在开始编写测试用例之前，我们需要了解一些 GraphQL 的基础知识。GraphQL 查询由一个查询字符串和一组变量组成。查询字符串描述了我们要获取的数据的结构，变量是查询字符串中的占位符，它们的值在查询执行时被提供。

我们将编写一个简单的测试用例来测试一个 GraphQL 查询。假设我们有一个 getUsers 查询，它返回一个用户列表。查询字符串如下所示：

query getUsers {
  users {
    id
    name
    email
  }
}

我们将使用 jest-graphql-mock 来模拟这个查询的响应。首先，我们需要创建一个测试文件 users.test.js，并编写以下代码：

import { graphql } from 'graphql';
import { makeExecutableSchema } from 'graphql-tools';
import { mockGraphQLQuery } from 'jest-graphql-mock';
import { typeDefs, resolvers } from './schema';

const schema = makeExecutableSchema({ typeDefs, resolvers });

describe('getUsers', () => {
  it('returns a list of users', async () => {
    const response = {
      data: {
        users: [
          { id: '1', name: 'Alice', email: 'alice@example.com' },
          { id: '2', name: 'Bob', email: 'bob@example.com' },
        ],
      },
    };
    mockGraphQLQuery(schema, response);

    const query = `
      query getUsers {
        users {
          id
          name
          email
        }
      }
    `;
    const result = await graphql(schema, query);

    expect(result).toEqual(response);
  });
});

在上面的代码中，我们首先导入 graphql 和 jest-graphql-mock。然后，我们使用 makeExecutableSchema 函数创建一个 GraphQL schema。我们还需要导入我们的 schema 和 resolvers。在本例中，我们将它们放在 schema.js 文件中。

接下来，我们编写一个测试用例，它测试 getUsers 查询是否返回一个用户列表。我们首先定义一个 response 对象，它包含我们期望的查询响应。然后，我们使用 mockGraphQLQuery 函数来模拟查询的响应。该函数需要一个 schema 和一个响应对象作为参数。

接下来，我们定义一个查询字符串，并使用 graphql 函数来执行查询。最后，我们使用 Jest 的 expect 函数来断言查询结果是否与我们期望的响应相同。

总结

在本文中，我们学习了如何在 Jest 中测试 GraphQL 应用。我们了解了 GraphQL 查询的基础知识，并使用 jest-graphql-mock 来模拟查询的响应。我们还编写了一个简单的测试用例来测试一个 GraphQL 查询。希望这篇文章能够帮助您更好地理解如何测试 GraphQL 应用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bb73a6add4f0e0ff444dc8