React-apollo: Using MockedProvider results in error "No more mocked responses for the query: ..."

[tkiethanom]

I'm not sure why this happens, it seems I need to set up some MockedResponses but I don't know how to do that. When I console.log _this.mockedResponsesByKey and key in MockNetworkInterface.prototype.query it looks like the keys don't match because one is a string and the other is an object. I could be reading this wrong though.

Steps to Reproduce

Mount a MockedProvider using enzyme.

const query = addTypenameToDocument(myQuery);

const mounted = mount(
    <MockedProvider mocks={[
        {
            request: { query, variables },
            result: { data: mockedData },
        }
    ]}>
        <ConnectedComponent { ... routerParams } store={store} />
    </MockedProvider>
);

Buggy Behavior

The component receives No more mocked responses for the query: ... in this.props.data.error

Expected Behavior

Should not throw an error

Version

• [email protected]
• [email protected]

[helfer]

@tkiethanom As you correctly noted this is likely not an issue with react-apollo but with your code. Make sure the query and variables exactly match. Also note that you need a mock request and response for every time your query is fired. If you refetch the query twice you will need three identical mock requests and responses.

If you can't figure it out after a while, I recommend asking for help on the apollo slack or stackoverflow. 🙂

[tkiethanom]

@helfer Thanks for the quick response. I found the issue to my problem. I noticed the ID of my variables are getting encoded in the query that's why they don't match. I know Apollo does some ID encoding for deduplication. I believe the MockedProvider makes some assumptions about the dataIdFromObject configuration. Is this correct?

[grimunit]

I was getting this same error and setting the removeTypename property to true on the MockedProvider resolved it for me. I was even manually adding the __typename field to all the levels on my mocked response and was still getting the error before adding the removeTypename property.

[allexysleeps]

@grimunit should I add this prop to MockProvider?
I've tried add it but still got this error.
I've actually just copied real response from server, that works fine in app, but get error in testing.
with typenames provided and without 😩

const query = CATEGORIES_QUERY
  const variables = { cache: false }
  const mockedData = mockedCategories
  const wrapper = (props) => mount(
    <MockedProvider
      removeTypename
      mocks={[{ request: { query, variables }, result: { data: mockedData } }]}>
      <CategoriesBody {...props} />
    </MockedProvider>,
  )

[stolinski]

@allexysleeps did you get yours working? I'm still getting the error myself after adding removeTypename.

[allexysleeps]

@stolinski No, we've skipped those tests for now 😞

[joepuzzo]

Hey guys i am also getting this :( any updates? I have triple checked my query definitions and it should match.

[joepuzzo]

Ok i figured it out.. internally there is a line that looks up your responce via the key where the key is the query and the variables.. if your variables are in a different order then the key is different and it all gets fubared.

[joepuzzo]

Also once you get that working you may need to call update() on your component wrapper if you use enzyme.

[scottmcpherson]

This is still an issue that applies to MockProvider. I'm opening a new issue since this one has been closed. Here is a commit that can be used to reproduce.

[stolinski]

@scottmcpherson I've found that you need your mocked response, variables and query to all be the exact same data 100%. Chances are if you are getting this you aren't passing the right variable or you aren't returning thee right data in your mocks. Where in your repo are you having this issue, it's a pretty big repo to paw through.

[scottmcpherson]

Yeah, I tripple checked the vars, query, and response, but maybe I'm missing something @stolinski
Here's the test file
https://github.com/scottmcpherson/react-graphql-apollo-semanticui-starter/blob/91c19c55ae9a0ce2df72245ff9f61deb0fefb14c/client/src/routes/Tasks/components/AddTask/AddTask.test.js

The only thing that I can think of that might be throwing it off is how I'm enveloping my variables with an input variable in the request. And maybe that somehow doesn't match with the response.

[stolinski]

I could be wrong since I just started looking at this, but it looks like you are setting your input value to
'Test title' on line 32 of the test but setting the mock response to be 'Task One' here const createPublicTask = { id: 1, title: 'Task one' }

[scottmcpherson]

That was it. Thanks @stolinski! I should have just referenced my createPublicTask.title to avoid that.

[stolinski]

Awesome! Every time I see this error it's because the response and the data aren't the same. It's so easy to do.

[FernandoBasso]

If you refetch the query twice you will need three identical mock requests and responses.

This part of the answer was especially important for me (in my case it is a fetchMore). I don't think it is mentioned the docs.

[philberryman]

I struggled with this error for way too long. I double checked everything. I though ...

Turned out it was a variable that expected an Int but I was sending through as a String. A simple Number(myVariable) fixed it.

[steelx]

@philberryman it helped me too, variables type wasnt matching. I was sending it an int 123456, instead of String "123456"

[mattfwood]

I feel like this is a common issue people run into when trying to create tests using <MockedProvider />, and I feel like there's some room to improve the dev experience.

I'd be glad to work on this pull request myself, but I was thinking this error could be more clear by showing a visual "diff" of the mocked responses and the queries that were run, similar to how Jest does it:

I've definitely run into errors like @steelx is describing, and it can be hard to compare bigger queries and figure out which parts are different.

[CarlGranstrom]

I'd be glad to work on this pull request myself, but I was thinking this error could be more clear by showing a visual "diff" of the mocked responses and the queries that were run, similar to how Jest does it:

@mattfwood That'd be amazing!

[SimenB]

There is #2883

[ARMATAV]

2883 definitely needs a cleanup and a merge, without a diff it's incredibly hard to tell what the error is. Can we get clarification on what needs to be changed in that PR? (i.e. if lodash/jest-diff/bundle size is still an issue)

[NickolasBenakis]

@helfer
@FernandoBasso

Guys That's awesome.
I faced the same problem too.
How you provide twice the requests, responses to the mock array?
By duplicated them?
This is an example of structuring my mock response

    mocks = [
      {
        request: {
          query: gql`
            ${comments.INSERT_COMMENT}
          `,
          variables: {
            commentObject: {
              body: "testing",
              drug_id: 1
            }
          }
        },
        result: {
          data: {
            insert_comment_one: {
              body: "testing",
              comment_id: 1,
              __typename: "comment"
            }
          }
        }
      }
    ];

[luan-vieira]

I ran into this issue after adding a refetch() to my component. Duplicating the mocks provided to MockedProvider fixed it @NickolasBenakis

const listUploadsMock = {
  request: {
    query: ListUploads
  },
  result: {
    data: {
      numberManagementUploads: uploadsData.numberManagementUploads,
    }
  }
};

const mountAppWithRouter = (mountPath, mocks = [listUploadsMock]) => {
  return (
    mount(
      <MockedProvider mocks={mocks}>
        <App config="/url/create?ajax=1" history={history} />
      </MockedProvider>
    )
  );
};

// rendering my component with an array of 2 identical listUploadsMock fixed it
component = mountAppWithRouter("/new/create_numbers", [listUploadsMock, listUploadsMock]);

[sgentile]

not sure if possible but it would go a loooong way if the mocked response gave some sort of reason into what is not matching. This is a rather painful process and not very well documented

[sgentile]

What does this mean ?

If you refetch the query twice you will need three identical mock requests and responses.

This part of the answer was especially important for me (in my case it is a fetchMore). I don't think it is mentioned the docs.

3 identical, I only see ability to add one 'mocks' - are you saying I pass in array of mocks ?

Another item that needs documenting.

[sgentile]

Why above are you needing to pass identical mocks in twice ? It's identical. This is a serious code smell imo, a MockedProvider should be given exactly what it needs to have as input and output and pass that through. That is why it's a mock.

[michelalbers]

not sure if possible but it would go a loooong way if the mocked response gave some sort of reason into what is not matching. This is a rather painful process and not very well documented

THIS would be awesome.