Move toHaveSuspenseCacheEntryUsing matchers to global matchers

Author: jerelmiller

src/react/hooks/__tests__/useSuspenseQuery.test.tsx

@@ -47,51 +47,6 @@ import { ApolloProvider } from '../../context';
 import { SuspenseCache } from '../../cache';
 import { SuspenseQueryHookFetchPolicy } from '../../../react';
 import { useSuspenseQuery } from '../useSuspenseQuery';
-import { canonicalStringify } from '../../../cache';
-
-expect.extend({
-  toHaveSuspenseCacheEntryUsing(
-    suspenseCache: SuspenseCache,
-    client: ApolloClient<unknown>,
-    query: DocumentNode,
-    {
-      variables,
-      queryKey = [],
-    }: {
-      variables?: OperationVariables;
-      queryKey?: string | number | any[];
-    } = Object.create(null)
-  ) {
-    const cacheKey = (
-      [client, query, canonicalStringify(variables)] as any[]
-    ).concat(queryKey);
-    const queryRef = suspenseCache['queryRefs'].lookupArray(cacheKey)?.current;
-
-    return {
-      pass: !!queryRef,
-      message: () => {
-        return `Expected suspense cache ${
-          queryRef ? 'not ' : ''
-        }to have cache entry using key`;
-      },
-    };
-  },
-});
-
-declare global {
-  namespace jest {
-    interface Matchers<R = void> {
-      toHaveSuspenseCacheEntryUsing(
-        client: ApolloClient<unknown>,
-        query: DocumentNode,
-        options?: {
-          variables?: OperationVariables;
-          queryKey?: string | number | any[];
-        }
-      ): R;
-    }
-  }
-}
 
 type RenderSuspenseHookOptions<Props, TSerializedCache = {}> = Omit<
   RenderHookOptions<Props>,

src/testing/matchers/index.d.ts

@@ -1,11 +1,27 @@
-import type { DocumentNode } from '../../core';
+import type {
+  ApolloClient,
+  DocumentNode,
+  OperationVariables,
+} from '../../core';
 
 interface ApolloCustomMatchers<R = void> {
   /**
    * Used to determine if two GraphQL query documents are equal to each other by
    * comparing their printed values. The document must be parsed by `gql`.
    */
   toMatchDocument(document: DocumentNode): R;
+
+  /**
+   * Used to determine if the Suspense cache has a cache entry.
+   */
+  toHaveSuspenseCacheEntryUsing(
+    client: ApolloClient<unknown>,
+    query: DocumentNode,
+    options?: {
+      variables?: OperationVariables;
+      queryKey?: string | number | any[];
+    }
+  ): R;
 }
 
 declare global {

src/testing/matchers/index.ts

@@ -1,6 +1,8 @@
 import { expect } from '@jest/globals';
 import { toMatchDocument } from './toMatchDocument';
+import { toHaveSuspenseCacheEntryUsing } from './toHaveSuspenseCacheEntryUsing';
 
 expect.extend({
+  toHaveSuspenseCacheEntryUsing,
   toMatchDocument,
 });

src/testing/matchers/toHaveSuspenseCacheEntryUsing.ts

@@ -0,0 +1,39 @@
+import type { MatcherFunction } from 'expect';
+import type { DocumentNode } from 'graphql';
+import type { ApolloClient, OperationVariables } from '../../core';
+import { SuspenseCache } from '../../react';
+import { canonicalStringify } from '../../cache';
+
+export const toHaveSuspenseCacheEntryUsing: MatcherFunction<
+  [
+    client: ApolloClient<unknown>,
+    query: DocumentNode,
+    options: {
+      variables?: OperationVariables;
+      queryKey?: string | number | any[];
+    }
+  ]
+> = function (
+  suspenseCache,
+  client,
+  query,
+  { variables, queryKey = [] } = Object.create(null)
+) {
+  if (!(suspenseCache instanceof SuspenseCache)) {
+    throw new Error('Actual must be an instance of `SuspenseCache`');
+  }
+
+  const cacheKey = (
+    [client, query, canonicalStringify(variables)] as any[]
+  ).concat(queryKey);
+  const queryRef = suspenseCache['queryRefs'].lookupArray(cacheKey)?.current;
+
+  return {
+    pass: !!queryRef,
+    message: () => {
+      return `Expected suspense cache ${
+        queryRef ? 'not ' : ''
+      }to have cache entry using key`;
+    },
+  };
+};