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

在前端开发中，测试是不可或缺的一部分。而在使用 GraphQL 开发应用时，我们需要针对 GraphQL 查询、变异和订阅等功能进行测试。本文将介绍如何使用 Jest 测试 GraphQL 应用，并提供一些技巧和指导意义。

安装 Jest

在开始测试之前，我们需要先安装 Jest。可以使用 npm 或 yarn 进行安装：

npm install --save-dev jest

或者

yarn add --dev jest

测试 GraphQL 查询

GraphQL 查询是我们最常用的功能之一。在进行测试时，我们需要编写测试用例来确保查询结果正确。以下是一个例子：

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

const typeDefs = `
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

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

test('hello query', async () => {
  const query = `
    query {
      hello
    }
  `;

  const result = await graphql(schema, query);
  expect(result.data.hello).toEqual('Hello world!');
});

在上面的例子中，我们定义了一个名为 hello 的查询，其返回值为一个字符串 Hello world!。我们使用 graphql 函数执行查询，并断言返回结果的 data 字段的值为 Hello world!。

测试 GraphQL 变异

GraphQL 变异用于修改数据。在测试变异时，我们需要编写测试用例来确保数据被正确修改。以下是一个例子：

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

const typeDefs = `
  type Query {
    count: Int
  }

  type Mutation {
    increment: Int
  }
`;

let count = 0;

const resolvers = {
  Query: {
    count: () => count,
  },
  Mutation: {
    increment: () => {
      count += 1;
      return count;
    },
  },
};

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

test('increment mutation', async () => {
  const mutation = `
    mutation {
      increment
    }
  `;

  const result = await graphql(schema, mutation);
  expect(result.data.increment).toEqual(1);
  expect(count).toEqual(1);
});

在上面的例子中，我们定义了一个名为 increment 的变异，其将 count 变量加一，并返回加一后的值。我们使用 graphql 函数执行变异，并断言返回结果的 data 字段的值为 1，同时也断言 count 变量的值为 1。

测试 GraphQL 订阅

GraphQL 订阅用于实时更新数据。在测试订阅时，我们需要编写测试用例来确保数据能够正确地实时更新。以下是一个例子：

// javascriptcn.com 代码示例
const { subscribe } = require('graphql');
const { makeExecutableSchema } = require('@graphql-tools/schema');
const { createServer } = require('http');
const { execute, subscribe: executeSubscribe } = require('graphql');

const typeDefs = `
  type Query {
    count: Int
  }

  type Subscription {
    countUpdated: Int
  }
`;

let count = 0;

const resolvers = {
  Query: {
    count: () => count,
  },
  Subscription: {
    countUpdated: {
      subscribe: () => {
        return async function* () {
          while (true) {
            await new Promise((resolve) => setTimeout(resolve, 1000));
            yield { count: count++ };
          }
        };
      },
    },
  },
};

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

test('countUpdated subscription', async () => {
  const httpServer = createServer((req, res) => {
    res.writeHead(404);
    res.end();
  });

  const subscriptionServer = executeSubscribe({
    schema,
    document: `
      subscription {
        countUpdated
      }
    `,
  });

  subscriptionServer.subscribe((result) => {
    expect(result.data.countUpdated).toBeDefined();
    expect(result.errors).toBeUndefined();
    expect(result.data.countUpdated).toEqual(count);
    subscriptionServer.close();
    httpServer.close();
  });

  httpServer.listen(0, async () => {
    const httpServerPort = httpServer.address().port;
    const wsEndpoint = `ws://localhost:${httpServerPort}`;

    const subscriptionClient = await subscribe({
      schema,
      document: `
        subscription {
          countUpdated
        }
      `,
      variableValues: {},
      contextValue: {},
      operationName: null,
      execute,
      subscribe,
      wsEndpoint,
    });
  });
});

在上面的例子中，我们定义了一个名为 countUpdated 的订阅，其每秒钟返回一个对象，包含一个 count 字段，值为 count 变量的当前值。我们使用 createServer 函数创建一个 HTTP 服务器，并使用 executeSubscribe 函数创建一个订阅服务器。我们在测试用例中订阅服务器，并断言每次订阅返回的数据都是正确的。

总结

使用 Jest 测试 GraphQL 应用是一项重要的任务。在测试查询、变异和订阅时，我们需要编写测试用例来确保数据被正确处理，并使用 Jest 提供的断言函数来验证测试结果。本文介绍了测试 GraphQL 应用的一些技巧和指导意义，并提供了示例代码供读者参考。希望读者能够掌握这些技能，提高自己的测试能力。

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