Add expected/received variables to 'No more mocked responses' error message

src/utilities/testing/mocking/__tests__/MockedProvider.test.tsx

@@ -157,7 +157,8 @@ describe('General use', () => {
     }
 
     const variables2 = {
-      username: 'other_user'
+      username: 'other_user',
+      age: undefined
     };
 
     render(

src/utilities/testing/mocking/__tests__/__snapshots__/MockedProvider.test.tsx.snap

@@ -14,7 +14,9 @@ exports[`General use should error if the query in the mock and component do not
     __typename
   }
 }
-, variables: {"username":"mock_username"}]
+
+Expected variables: {"username":"mock_username"}
+]
 `;
 
 exports[`General use should error if the variables do not deep equal 1`] = `
@@ -24,7 +26,12 @@ exports[`General use should error if the variables do not deep equal 1`] = `
     __typename
   }
 }
-, variables: {"username":"some_user","age":42}]
+
+Expected variables: {"username":"some_user","age":42}
+
+Failed to match 1 mock for this query, which had the following variables:
+  {"age":13,"username":"some_user"}
+]
 `;
 
 exports[`General use should error if the variables in the mock and component do not match 1`] = `
@@ -34,7 +41,12 @@ exports[`General use should error if the variables in the mock and component do
     __typename
   }
 }
-, variables: {"username":"other_user"}]
+
+Expected variables: {"username":"other_user","age":<undefined>}
+
+Failed to match 1 mock for this query, which had the following variables:
+  {"username":"mock_username"}
+]
 `;
 
 exports[`General use should mock the data 1`] = `
@@ -64,7 +76,9 @@ exports[`General use should return "No more mocked responses" errors in response
     __typename
   }
 }
-, variables: {}]
+
+Expected variables: {}
+]
 `;
 
 exports[`General use should support custom error handling using setOnError 1`] = `
@@ -74,5 +88,7 @@ exports[`General use should support custom error handling using setOnError 1`] =
     __typename
   }
 }
-, variables: {"username":"mock_username"}]
+
+Expected variables: {"username":"mock_username"}
+]
 `;

src/utilities/testing/mocking/mockLink.ts

@@ -15,10 +15,18 @@ import {
   removeClientSetsFromDocument,
   removeConnectionDirectiveFromDocument,
   cloneDeep,
+  makeUniqueId,
 } from '../../../utilities';
 
 export type ResultFunction<T> = () => T;
 
+function stringifyForDisplay(value: any): string {
+  const undefId = makeUniqueId("stringifyForDisplay");
+  return JSON.stringify(value, (key, value) => {
+    return value === void 0 ? undefId : value;
+  }).split(JSON.stringify(undefId)).join("<undefined>");
+}
+
 export interface MockedResponse<TData = Record<string, any>> {
   request: GraphQLRequest;
   result?: FetchResult<TData> | ResultFunction<FetchResult<TData>>;
@@ -72,34 +80,41 @@ export class MockLink extends ApolloLink {
   public request(operation: Operation): Observable<FetchResult> | null {
     this.operation = operation;
     const key = requestToKey(operation, this.addTypename);
-    let responseIndex: number = 0;
-    const response = (this.mockedResponsesByKey[key] || []).find(
-      (res, index) => {
-        const requestVariables = operation.variables || {};
-        const mockedResponseVariables = res.request.variables || {};
-        if (equal(requestVariables, mockedResponseVariables)) {
-          responseIndex = index;
-          return true;
-        }
-        return false;
+    const unmatchedVars: Array<Record<string, any>> = [];
+    const requestVariables = operation.variables || {};
+    const mockedResponses = this.mockedResponsesByKey[key];
+    const responseIndex = mockedResponses ? mockedResponses.findIndex((res, index) => {
+      const mockedResponseVars = res.request.variables || {};
+      if (equal(requestVariables, mockedResponseVars)) {
+        return true;
       }
-    );
+      unmatchedVars.push(mockedResponseVars);
+      return false;
+    }) : -1;
+
+    const response = responseIndex >= 0
+      ? mockedResponses[responseIndex]
+      : void 0;
 
     let configError: Error;
 
-    if (!response || typeof responseIndex === 'undefined') {
+    if (!response) {
       configError = new Error(
-        `No more mocked responses for the query: ${print(
-          operation.query
-        )}, variables: ${JSON.stringify(operation.variables)}`
-      );
+`No more mocked responses for the query: ${print(operation.query)}
+Expected variables: ${stringifyForDisplay(operation.variables)}
+${unmatchedVars.length > 0 ? `
+Failed to match ${unmatchedVars.length} mock${
+  unmatchedVars.length === 1 ? "" : "s"
+} for this query, which had the following variables:
+${unmatchedVars.map(d => `  ${stringifyForDisplay(d)}`).join('\n')}
+` : ""}`);
     } else {
-      this.mockedResponsesByKey[key].splice(responseIndex, 1);
+      mockedResponses.splice(responseIndex, 1);
 
       const { newData } = response;
       if (newData) {
         response.result = newData();
-        this.mockedResponsesByKey[key].push(response);
+        mockedResponses.push(response);
       }
 
       if (!response.result && !response.error) {
@@ -151,7 +166,7 @@ export class MockLink extends ApolloLink {
   ): MockedResponse {
     const newMockedResponse = cloneDeep(mockedResponse);
     const queryWithoutConnection = removeConnectionDirectiveFromDocument(
-        newMockedResponse.request.query
+      newMockedResponse.request.query
     );
     invariant(queryWithoutConnection, "query is required");
     newMockedResponse.request.query = queryWithoutConnection!;