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

• apollo-client@1.0.1
• react-apollo@0.9.0

[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' }