Feature request 241: reuse mocks in MockLink / MockedProvider

.changeset/yellow-flies-repeat.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": minor
+---
+
+Support re-using of mocks in the MockedProvider

docs/source/development-testing/testing.mdx

@@ -150,6 +150,37 @@ it("renders without error", async () => {
 
 </ExpansionPanel>
 
+#### Reusing mocks
+
+By default, a mock is only used once. If you want to reuse a mock for multiple operations, you can set the `reuse` field to a number indicating how many times the mock should be reused:
+
+<ExpansionPanel title="Click to expand 🐶">
+
+```jsx title="dog.test.js"
+import { GET_DOG_QUERY } from "./dog";
+
+const mocks = [
+  {
+    request: {
+      query: GET_DOG_QUERY,
+      variables: {
+        name: "Buck"
+      }
+    },
+    result: {
+      data: {
+        dog: { id: "1", name: "Buck", breed: "bulldog" }
+      }
+    },
+    reuse: 2, // The mock can be reused twice before it's removed, default is 0
+  }
+];
+```
+
+</ExpansionPanel>
+
+Passing `Number.POSITIVE_INFINITY` will cause the mock to be reused indefinitely.
+
 ### Setting `addTypename`
 
 In the example above, we set the `addTypename` prop of `MockedProvider` to `false`. This prevents Apollo Client from automatically adding the special `__typename` field to every object it queries for (it does this by default to support data normalization in the cache).

src/testing/core/mocking/mockLink.ts

@@ -27,6 +27,7 @@ export interface MockedResponse<
 > {
   request: GraphQLRequest<TVariables>;
   result?: FetchResult<TData> | ResultFunction<FetchResult<TData>>;
+  reuse?: number;
   error?: Error;
   delay?: number;
   newData?: ResultFunction<FetchResult>;
@@ -127,7 +128,12 @@ ${unmatchedVars.map((d) => `  ${stringifyForDisplay(d)}`).join("\n")}
         );
       }
     } else {
-      mockedResponses.splice(responseIndex, 1);
+      if (!response.reuse) {
+        mockedResponses.splice(responseIndex, 1);
+      } else if (response.reuse !== Number.POSITIVE_INFINITY) {
+        response.reuse--;
+      }
+
 
       const { newData } = response;
       if (newData) {

src/testing/react/__tests__/MockedProvider.test.tsx

@@ -481,6 +481,105 @@ describe("General use", () => {
     expect(errorThrown).toBeFalsy();
   });
 
+  it('should reuse mocks when instructed to', async () => {
+    let isLoaded = false;
+    let isError = false;
+    function Component({ username }: Variables) {
+      const { loading, error } = useQuery<Data, Variables>(query, { variables: { username }, fetchPolicy: 'network-only' });
+      if (!loading) {
+        if (error) {
+          isError = true;
+        }
+        isLoaded = true;
+      }
+      return null;
+    }
+
+    const mocks: ReadonlyArray<MockedResponse> = [
+      {
+        request: {
+          query,
+          variables: {
+            username: 'mock_username'
+          }
+        },
+        reuse: 1,
+        result: { data: { user } }
+      },
+      {
+        request: {
+          query,
+          variables: {
+            username: 'mock_username2'
+          }
+        },
+        reuse: Number.POSITIVE_INFINITY,
+        result: { data: { user } }
+      },
+      {
+        request: {
+          query,
+          variables: {
+            username: 'mock_username3'
+          }
+        },
+        result: { data: { user } }
+      }
+    ];
+
+    const mockLink = new MockLink(mocks, true, { showWarnings: false });
+
+    const Wrapper = ({ children }: { children: React.ReactNode }) => <MockedProvider link={mockLink}>{children}</MockedProvider>
+    const reset = () => {
+      isLoaded = false;
+      isError = false;
+    }
+    const waitForLoaded = async () => {
+      await waitFor(() => {
+        expect(isLoaded).toBe(true);
+        expect(isError).toBe(false);
+      });
+    }
+    const waitForError = async () => {
+      await waitFor(() => {
+        expect(isLoaded).toBe(true);
+        expect(isError).toBe(true);
+      });
+    }
+
+    const { rerender } = render(<Component username="mock_username" />, { wrapper: Wrapper });
+    await waitForLoaded();
+    reset();
+
+    rerender(<Component username="mock_username2" />);
+    await waitForLoaded();
+    reset();
+
+    rerender(<Component username="mock_username3" />);
+    await waitForLoaded();
+    reset();
+
+    rerender(<Component username="mock_username" />);
+    await waitForLoaded();
+    reset();
+
+    rerender(<Component username="mock_username2" />);
+    await waitForLoaded();
+    reset();
+
+    rerender(<Component username="mock_username3" />);
+    await waitForError();
+    reset();
+
+    rerender(<Component username="mock_username" />);
+    await waitForError();
+    reset();
+
+    rerender(<Component username="mock_username2" />);
+    await waitForLoaded();
+    reset();
+  });
+
   it('should return "Mocked response should contain" errors in response', async () => {
     let finished = false;
     function Component({ ...variables }: Variables) {