使用 Jest 测试 GraphQL 应用-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一个用于构建 API 的查询语言，它允许客户端精确地指定需要哪些数据，从而避免了 REST API 中不必要的数据传输。在前端开发中，我们经常需要使用 GraphQL 查询 API 并对其进行测试。本文介绍如何使用 Jest 测试 GraphQL 应用。

GraphQL 的测试基础

在进行 GraphQL 测试之前，需要先了解 GraphQL 的查询语法。GraphQL 查询由字段组成，每个字段可以包含子字段，以此类推。例如，以下查询请求从服务器中获取一个 todoItem 对象：

{
  todoItem(id: "1234") {
    id
    title
    completed
  }
}

在 Jest 中，我们可以使用 graphql 包来执行 GraphQL 查询。假设在本地启动了一个 GraphQL 服务器，在 Jest 测试中可以对它进行测试。在本例中，我们将编写一个基本的测试套件来测试查询 todoItem 的情况：

// javascriptcn.com 代码示例
const { graphql } = require('graphql');
const { makeExecutableSchema } = require('graphql-tools');
const resolvers = require('./resolvers');
const typeDefs = require('./schema');

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

test('test the todoItem query', async () => {
  const query = `
    {
      todoItem(id: "1234") {
        id
        title
        completed
      }
    }
  `;

  const res = await graphql(schema, query);
  expect(res.data.todoItem.id).toBe('1234');
  expect(res.data.todoItem.title).toBe('Todo Item 1');
  expect(res.data.todoItem.completed).toBe(true);
});

在此代码片段中，我们使用 makeExecutableSchema 方法创建了一个 schema 对象。这个对象包含了我们定义的类型和解析器。然后，我们对 GraphQL 查询进行了测试。在这个例子中，我们使用 graphql 函数在 schema 上执行了查询请求，并使用 Jest 的断言检查返回的数据是否正确。

测试 GraphQL mutations

类似于查询，我们可以使用 Jest 测试 GraphQL mutation。GraphQL mutation 用于修改数据库中的数据。在进行 mutation 测试时，需要确保在之前已经设置了数据库状态。假设在本地运行了一个带有保存 todoItem 功能的 GraphQL 服务器，我们可以编写一个测试套件来测试 todoItem 的创建过程：

// javascriptcn.com 代码示例
test('create a todoItem', async () => {
  const mutation = `
    mutation {
      createTodoItem(
        input:{
          title: "New Todo Item"
          completed: false
        }
      )
      {
        id
        title
        completed
      }
    }
  `;

  const res = await graphql(schema, mutation, {}, {});
  expect(res.data.createTodoItem.title).toBe('New Todo Item');
  expect(res.data.createTodoItem.completed).toBe(false);
});

在此代码片段中，我们执行一个名为 createTodoItem 的 mutation，同时指定一个新的 todoItem 对象。mutation 的 resolver 返回的 todoItem 对象遵循 schema 的定义，所以我们可以检查返回的数据是否与预期值匹配。

测试 subscriptions

GraphQL subscription 包含一个基于观察者模式的事件系统。通过使用 GraphQL subscription，客户端可以实时地接收基于服务器端事件的通知。在 Jest 中，我们可以使用 subscribe 方法在客户端中订阅一个 subscription。例如，以下测试套件测试了 todosUpdates 订阅的情况：

// javascriptcn.com 代码示例
test('listen for todo item updates', async (done) => {
  // Subscribe to the `todosUpdates` subscription
  const subscription = `
    subscription todosUpdates {
      todoUpdated {
        id
        title
        completed
      }
    }
  `;

  // Define a callback function for the subscription
  const updateHandler = jest.fn().mockImplementation(() => {
    done();
  });

  // Start the subscription
  const asyncIterator = await graphqlSubscribe({
    schema,
    document: subscription,
  });

  // Log the event
  asyncIterator.subscribe({
    next: updateHandler,
  });

  // Trigger a todo item update
  await TodoModel.updateOne({ id: '1234' }, { completed: true });

  // Ensure the callback function was called
  expect(updateHandler).toHaveBeenCalled();
});

在此代码片段中，我们定义了一个名为 todosUpdates 的 subscription。然后，我们指定了一个回调函数 updateHandler，该函数将于 subscription 捕捉到 todo item 更新事件时被调用。接下来，我们使用 graphqlSubscribe 方法来订阅 todosUpdates。然后，我们调用 updateOne 方法来触发 todoUpdated 事件，最后检查 updateHandler 是否被调用。

总结

本文介绍了如何使用 Jest 测试 GraphQL 应用。我们探讨了如何使用 GraphQL 查询、mutation 和 subscription，以及如何定义测试套件来对 GraphQL 应用进行测试。如果你是一名前端开发人员，学习如何使用 Jest 和 GraphQL 来测试你的应用程序将会对你有所帮助。通过编写测试套件，你不仅可以确保你的代码质量，还可以提高你的代码可维护性。

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