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 错误。
您可以创建模拟终止链接并提供 GraphQL 操作结果。
\n例如
\nerrorLink.ts
:
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)\nerrorLink.test.ts
:
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
归档时间: |
|
查看次数: |
3030 次 |
最近记录: |