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

[markneub]

Updated version of abandoned PR #6963

Checklist:

• If this PR is a new feature, please reference an issue where a consensus about the design was reached (not necessary for small changes)
• Make sure all of the significant new logic is covered by tests

Motivation

When testing a request using the MockedProvider, sometimes a mocked response is not found because the variables provided do not match the mock. It can be hard to tell what the differences are — this PR prints out the expected variables and the found variables, including variables that are set to undefined (fixes #6771).

Sample Test Output

General use should error if the variables in the mock and component do not match

Error: No more mocked responses for the query: query GetUser($username: String!) {
  user(username: $username) {
    id
    __typename
  }
}

Expected variables:
  {"username":"mock_username","age":"undefined"}
Found 1 mock with variables:
  1: {"username":"mock_username"}

General use should error if the variables do not deep equal

Error: No more mocked responses for the query: query GetUser($username: String!) {
  user(username: $username) {
    id
    __typename
  }
}

Expected variables:
  {"username":"some_user","age":42}
Found 1 mock with variables:
  1: {"age":13,"username":"some_user"}

General use should error if the query in the mock and component do not match

Error: No more mocked responses for the query: query GetUser($username: String!) {
  user(username: $username) {
    id
    __typename
  }
}

Expected variables:
  {"username":"mock_username"}

[apollo-cla]

@markneub: Thank you for submitting a pull request! Before we can merge it, you'll need to sign the Apollo Contributor License Agreement here: https://contribute.apollographql.com/

[benjamn]

@markneub Looks good to me, with some minor error message formatting tweaks. You're going to make a lot of developers a lot less confused when their mock variables don't match. Thanks!

[benjamn]

With my changes, undefined values now print as <undefined> rather than "undefined". This makes sense because these values are not actually strings, and while the <undefined> syntax is not legal JSON, that's fine because these strings are just for display (not for JSON.parse to consume later).

[benjamn]

These changes should be available now in @apollo/client@3.4.0-rc.6. Thanks @markneub!