feat req: Improve "No more mocked responses for the query" message

[KyleBastien]

Migrated from: apollographql/react-apollo#3013

[willisplummer]

👋 I just spent an hour trying to figure out why my query and variables weren't matching and it turned out that the date strings i was passing to the query didn't match the Date objects getting passed into the actual Query component.

It was frustratingly hard to debug because the error says:

        Error! Network error: No more mocked responses for the query: query Tutor($tutorId: ID!, $rangeStart: ISO8601DateTime!, $rangeEnd: ISO8601DateTime!) {

[etc..]

    , variables: {"tutorId":"12345","rangeStart":"2019-06-09T04:00:00.000Z","rangeEnd":"2019-06-16T03:59:59.999Z"}

and my mock looked identical :

    const mocks = [
      {
        request: {
          query: GET_TUTOR,
          variables: {
            tutorId: '12345',
            rangeStart: '2019-06-09T04:00:00.000Z',
            rangeEnd: '2019-06-16T03:59:59.999Z',
          },
        },
        result: {
          data: { me: { name: 'test' } },
        },
      },

a diff or a message about the types not matching would have been so helpful 😢

[villesau]

Would also be important to show how many mocked responses did match. In some cases there might fire more than one request and you have a mock only for the first one. With current error message it's not clear wether it matched any or some.

[spirift]

Take a look in react-apollo/test-link.js inside your node_modules folder. Find the request method (Looks something like: MockLink.prototype.request = function (operation) {) and then log out operation. You should now be able to see what variables the request is being raised with and can copy them into your test file.

I've spent hours trying to work out why I am getting missed when trying to mock requests as well. I hope this way helps you.

EDIT: I am using react-apollo 2.5.3. I think this would be @apollo/react-testing in version 3 and beyond.

EDIT 2: From looking around the code some more, those variables that are being generated by the unit under test are logged as part of the error but this was not obvious to me from the log. I have also noticed that the log sometimes doesn't show in the terminal for an unknown reason.

The code is using the isEqual method from lodash to compare the variables in the mock to the variables in the request. I feel this might be a little too strict when the end user (i.e. us devs) is just trying to create a mock to force their test into a particular state. Maybe that's just me though.

[SebiTimeWaster]

i am in the same situation atm, i am 100% sure my query, my variables and the amount of calls match, yet i get this error. this situation is UNDEBUGGABLE and wastes insane amounts of time trying things until by pure luck things start to work.

[SebiTimeWaster]

MEGAFACEPALM.
i was actually not giving ANY mock into the mockedProvider.
after reading @spirift comment about logging in the MockLink.prototype.request method i started debugging everything in there and noticed that this.mockedResponsesByKey is actually EMPTY and then i found the error pretty fast.

PLEASE, PLEASE add an extra error when no mocks are given at all:

    if (this.mockedResponsesByKey === {}) {
      throw new Error("No mock was given.");
    }

[bmitchinson]

Spent a few hours on this due to capitalization of a string, would love to see this implemented!

[zargold]

I think the phrase itself is misleading: I'm pretty sure that I have no mock responses set up with my MockProvider yet I get:
"No more mocked responses for the query: someQueryWhichIDidntRealizeWillFire()".

The phrasing should maybe be something like: "There is a mismatch between incoming requests and expected mock responses:"

You have mock responses set up: [{query: blah, mockResponse: blah }]
And requests: [{query: blah, mockResponse: blah }, {query: blah, mockResponse: blah },]
diff:
actual:
+ {
query: 
{
},
mockResponse: {
} }

expected: