Remove @nonreactive directives from queries passed to MockLink

.changeset/serious-candles-arrive.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Remove `@nonreactive` directives from queries passed to `MockLink` to ensure they are properly matched.

src/testing/core/mocking/__tests__/mockLink.ts

@@ -1,6 +1,7 @@
 import gql from "graphql-tag";
 import { MockLink, MockedResponse } from "../mockLink";
 import { execute } from "../../../../link/core/execute";
+import { ObservableStream, spyOnConsole } from "../../../internal";
 
 describe("MockedResponse.newData", () => {
   const setup = () => {
@@ -126,3 +127,154 @@ describe("mockLink", () => {
     jest.advanceTimersByTime(MAXIMUM_DELAY);
   });
 });
+
+test("removes @nonreactive directives from fields", async () => {
+  const query = gql`
+    query A {
+      a
+      b
+      c @nonreactive
+    }
+  `;
+
+  const link = new MockLink([
+    {
+      request: { query },
+      result: { data: { a: 1, b: 2, c: 3 } },
+      maxUsageCount: Number.POSITIVE_INFINITY,
+    },
+  ]);
+
+  {
+    const stream = new ObservableStream(
+      execute(link, {
+        query: gql`
+          query A {
+            a
+            b
+            c
+          }
+        `,
+      })
+    );
+
+    await expect(stream.takeNext()).resolves.toEqual({
+      data: { a: 1, b: 2, c: 3 },
+    });
+  }
+
+  {
+    using spy = spyOnConsole("warn");
+    const stream = new ObservableStream(execute(link, { query }));
+
+    expect(spy.warn).toHaveBeenCalledTimes(1);
+    expect(spy.warn).toHaveBeenCalledWith(
+      expect.stringMatching(/^No more mocked responses for the query/)
+    );
+
+    await expect(stream.takeError()).resolves.toEqual(expect.any(Error));
+  }
+});
+
+test("removes @connection directives", async () => {
+  const query = gql`
+    query A {
+      a
+      b
+      c @connection(key: "test")
+    }
+  `;
+
+  const link = new MockLink([
+    {
+      request: { query },
+      result: { data: { a: 1, b: 2, c: 3 } },
+      maxUsageCount: Number.POSITIVE_INFINITY,
+    },
+  ]);
+
+  {
+    const stream = new ObservableStream(
+      execute(link, {
+        query: gql`
+          query A {
+            a
+            b
+            c
+          }
+        `,
+      })
+    );
+
+    await expect(stream.takeNext()).resolves.toEqual({
+      data: { a: 1, b: 2, c: 3 },
+    });
+  }
+
+  {
+    using spy = spyOnConsole("warn");
+    const stream = new ObservableStream(execute(link, { query }));
+
+    expect(spy.warn).toHaveBeenCalledTimes(1);
+    expect(spy.warn).toHaveBeenCalledWith(
+      expect.stringMatching(/^No more mocked responses for the query/)
+    );
+
+    await expect(stream.takeError()).resolves.toEqual(expect.any(Error));
+  }
+});
+
+test("removes fields with @client directives", async () => {
+  const query = gql`
+    query A {
+      a
+      b
+      c @client
+    }
+  `;
+
+  const link = new MockLink([
+    {
+      request: { query },
+      result: { data: { a: 1, b: 2 } },
+      maxUsageCount: Number.POSITIVE_INFINITY,
+    },
+  ]);
+
+  {
+    const stream = new ObservableStream(
+      execute(link, {
+        query: gql`
+          query A {
+            a
+            b
+          }
+        `,
+      })
+    );
+
+    await expect(stream.takeNext()).resolves.toEqual({ data: { a: 1, b: 2 } });
+  }
+
+  {
+    using spy = spyOnConsole("warn");
+    const stream = new ObservableStream(
+      execute(link, {
+        query: gql`
+          query A {
+            a
+            b
+            c @client
+          }
+        `,
+      })
+    );
+
+    expect(spy.warn).toHaveBeenCalledTimes(1);
+    expect(spy.warn).toHaveBeenCalledWith(
+      expect.stringMatching(/^No more mocked responses for the query/)
+    );
+
+    await expect(stream.takeError()).resolves.toEqual(expect.any(Error));
+  }
+});

src/testing/core/mocking/mockLink.ts

@@ -13,10 +13,11 @@ import {
   Observable,
   addTypenameToDocument,
   removeClientSetsFromDocument,
-  removeConnectionDirectiveFromDocument,
   cloneDeep,
   stringifyForDisplay,
   print,
+  removeDirectivesFromDocument,
+  checkDocument,
 } from "../../../utilities/index.js";
 
 export type ResultFunction<T, V = Record<string, any>> = (variables: V) => T;
@@ -202,11 +203,12 @@ ${unmatchedVars.map((d) => `  ${stringifyForDisplay(d)}`).join("\n")}
     mockedResponse: MockedResponse
   ): MockedResponse {
     const newMockedResponse = cloneDeep(mockedResponse);
-    const queryWithoutConnection = removeConnectionDirectiveFromDocument(
-      newMockedResponse.request.query
+    const queryWithoutClientOnlyDirectives = removeDirectivesFromDocument(
+      [{ name: "connection" }, { name: "nonreactive" }],
+      checkDocument(newMockedResponse.request.query)
     );
-    invariant(queryWithoutConnection, "query is required");
-    newMockedResponse.request.query = queryWithoutConnection!;
+    invariant(queryWithoutClientOnlyDirectives, "query is required");
+    newMockedResponse.request.query = queryWithoutClientOnlyDirectives!;
     const query = removeClientSetsFromDocument(newMockedResponse.request.query);
     if (query) {
       newMockedResponse.request.query = query;