在 Jest 中 Mock 掉 GraphQL 请求的最佳实践

随着现代 Web 应用程序的使用越来越广泛，GraphQL 作为一种更灵活、高效的 API 查询语言，已经被广泛采用。GraphQL 还提供了一个便捷的方式，使得前端开发者能够在单元测试中模拟 API 请求并对其进行测试。在 Jest 中，Mock 掉 GraphQL 请求是一个重要的测试技巧，下面将对其进行详细介绍和讲解。

什么是 Jest？

Jest 是 Facebook 出品的一款 JavaScript 测试框架，旨在提供一个好用、快速的测试环境。Jest 内置了测试用例之间的依赖、断言、Mock 函数等常用功能，因此它非常适合进行前端单元测试。

Mock GraphQL 请求的需求

在前端开发过程中，我们通常需要使用 GraphQL 来与后端进行数据交互。如果后端的 API 频繁变化，那么前端使用 GraphQL 就非常方便，可以自由地查询/获取/提交想要的数据。

在进行前端单元测试时，需要 Mock 掉 GraphQL 请求，这样就不必真的发出网络请求，从而加快了测试代码的执行速度。同时，我们还需要实现一个可靠的 Mock GraphQL API，以确保测试代码不会在后续版本中因为 API 相关变化而失效。

基本的 GraphQL Mock

我们可以在代码中使用 jest.mock() 函数轻松地创建一个用于 Mock 的 GraphQL 对象，例如：

jest.mock('apollo-boost', () => {
  const ApolloClient = jest.fn();
  const query = jest.fn();
  const mutate = jest.fn();
  const subscribe = jest.fn();

  return {
    client: new ApolloClient(),
    query,
    mutate,
    subscribe,
  };
});

以上代码中，我们通过 jest.fn() 创建了 ApolloClient、query、mutate 和 subscribe 这四个基本的模拟 GraphQL 对象。ApolloClient 是 GraphQL 的客户端，query 用于查询，mutate 用于提交数据，subscribe 用于订阅数据更新。通过这种方式，我们可以控制这些 GraphQL 对象的属性，并在测试中使用它们。

Mock 具体的 GraphQL 请求

现在，我们已经定义了 Mock GraphQL 对象，我们需要为测试页面创建 Mock GraphQL 请求。

const mocks = [
  {
    request: {
      query: gql`
        query GetHello {
          hello
        }
      `
    },
    result: {
      data: { hello: 'world' }
    }
  }
];

const client = new ApolloClient({
  cache: new InMemoryCache(),
  mocks,
});

以上代码中，我们定义了一个名为 "mocks" 的数组，数组中包含一个对象，该对象模拟 GetHello 一条 GraphQL 请求。当服务端返回 "hello" 时，mocks 数组中的 result 会被返回，并且还可以定制化响应的数据格式。

在 Jest 中添加 Mock GraphQL

最后，我们将定义 Mock GraphQL 的代码加入到 Jest 的配置文件中。

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
  transform: {
    '^.+\\.(ts|js|html)$': 'ts-jest'
  },
  moduleNameMapper: {
    '^@app/(.*)$': '<rootDir>/src/app/$1',
    '^@env/(.*)$': '<rootDir>/src/environments/$1'
  },
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.(html|svg)$',
      astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')],
      diagnostics: {
        pathRegex: /\.(spec|test)\.ts$/,
        ignoreCodes: [151001]
      },
      stringify: {
        maxDepth: 1
      }
    },

    // 配置 Mock GraphQL
    __APOLLO_MOCKS__: '',
  },
  testMatch: ['**/*.spec.ts'],
  testPathIgnorePatterns: ['/node_modules/'],
  reporters: [
    'default',
    ['jest-junit', {
      outputDirectory: 'test-results/common',
      outputName: 'test-results.xml'
    }]
  ]
};

以上是 Jest 的一个配置示例，我们在其中添加了 APOLLO_MOCKS 这个变量，用来存储我们的 Mock GraphQL 后端接口。

// 在测试函数开始的时候，加载 Mock GraphQL
beforeEach(() => {
  __APOLLO_MOCKS__ = client;   // 此处的client是刚生成的ApolloClient对象
});

当我们在测试代码中引用这个变量时，就可以获取到我们定义的 Mock GraphQL 数据。

总结

在 Jest 中 Mock 掉 GraphQL 请求是一种非常重要的单元测试技巧。通过 Mock GraphQL，我们可以有效降低测试用例的运行时间，并且可以消除不必要的网络请求。另外，在测试代码中添加正确的 Mock GraphQL 对象，也可以保证测试代码的可靠性。

希望这篇文章可以帮助你掌握 Jest 中 Mock GraphQL 的技巧，以致于在进行前端单元测试时能够事半功倍。

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