如何触发 GraphQL 错误来测试 Apollo 客户端上的 ErrorLink?

Dav*_*son 3 unit-testing apollo reactjs graphql apollo-client

我为 Apollo 客户端设置了以下 ErrorLink。

export const errorLink = onError(
  ({ response, graphQLErrors, networkError, operation }: ErrorResponse) => {
    notificationService.notify("An Error Occurred");
  },
);
Run Code Online (Sandbox Code Playgroud)

我需要在单元测试中测试这个实现。我有以下内容来测试 Apollo Links

const MockQuery = gql`
  query {
    foo
  }
`;

interface LinkResult<T> {
  operation: Operation;
  result: FetchResult<T>;
}

async function executeLink<T = ApolloLink>(
  linkToTest: ApolloLink,
  request: GraphQLRequest = { query: MockQuery },
) {
  const linkResult = {} as LinkResult<T>;

  return new Promise<LinkResult<T>>((resolve, reject) => {
    execute(ApolloLink.from([linkToTest]), request).subscribe(
      (result) => {
        linkResult.result = result as FetchResult<T>;
      },
      (error) => {
        reject(error);
      },
      () => {
        resolve(linkResult);
      },
    );
  });
}

it('triggers a notification on error', () => {
  const testLink = new ApolloLink(() => {
    await waitFor(() => expect(notificationSpy).toBeCalledWith('An Error Occurred'))

    return null;
  });

  const link = ApolloLink.from([errorLink, testLink]);
  executeLink(link);
});
Run Code Online (Sandbox Code Playgroud)

这些单元测试适用于其他链接(例如 AuthLink),我在其中测试身份验证令牌是否设置为 localStorage。但我无法测试错误链接,因为我无法触发 GraphQL 错误。

sli*_*wp2 5

您可以创建模拟终止链接并提供 GraphQL 操作结果。

\n

例如

\n

errorLink.ts

\n
import { onError } from \'@apollo/client/link/error\';\n\ntype ErrorResponse = any;\n\nexport const errorLink = onError(({ response, graphQLErrors, networkError, operation }: ErrorResponse) => {\n  console.log(\'An Error Occurred\');\n  console.log(\'graphQLErrors: \', graphQLErrors);\n});\n
Run Code Online (Sandbox Code Playgroud)\n

errorLink.test.ts

\n
import { ApolloLink, execute, Observable } from \'@apollo/client\';\nimport { gql } from \'apollo-server-express\';\nimport { errorLink } from \'./errorLink\';\n\nconst MockQuery = gql`\n  query {\n    foo\n  }\n`;\n\ndescribe(\'68629868\', () => {\n  test(\'should pass\', (done) => {\n    expect.assertions(1);\n    const mockLink = new ApolloLink((operation) =>\n      Observable.of({\n        errors: [\n          {\n            message: \'resolver blew up\',\n          },\n        ],\n      } as any),\n    );\n\n    const link = errorLink.concat(mockLink);\n    execute(link, { query: MockQuery }).subscribe((result) => {\n      expect(result.errors![0].message).toBe(\'resolver blew up\');\n      done();\n    });\n  });\n});\n
Run Code Online (Sandbox Code Playgroud)\n

测试结果:

\n
 PASS   apollo-graphql-tutorial  src/stackoverflow/68629868/errorLink.test.ts (5.02s)\n  68629868\n    \xe2\x9c\x93 should pass (14ms)\n\n  console.log src/stackoverflow/68629868/errorLink.ts:6\n    An Error Occurred\n\n  console.log src/stackoverflow/68629868/errorLink.ts:7\n    graphQLErrors:  [ { message: \'resolver blew up\' } ]\n\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        5.067s\n
Run Code Online (Sandbox Code Playgroud)\n

软件包版本:@apollo/client@3.3.20

\n