React-apollo: Error: No more mocked responses for the query: mutation

[developer239]

Intended outcome:

MockedProvider should mock my createPost mutation.

Actual outcome:

Error: No more mocked responses for the query: mutation...

How to reproduce the issue:

I have a very simple repository. I also created a separate branch with example commit which is breaking the apollo mock provider.

1) Mutation definition is here: https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/src/modules/blog/gql.js#L23

export const CREATE_POST = gql`
  mutation createPost($title: String!, $text: String!) {
    createPost(title: $title, text: $text) {
      id
      title
      text
    }
  }
`

2) The fake request is here: https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/test/utils/gql-posts.js#L68

export const fakeCreatePostSuccess = {
  request: {
    query: CREATE_POST,
    variables: {
      title: 'Mock Title',
      text: 'Mock lorem ipsum text. And another paragraph.',
    }
  },
  result: {
    data: {
      createPost: {
        id: '1',
        title: 'Mock Title',
        text: 'Mock lorem ipsum text. And another paragraph.',
      },
    },
  },

3) The component that I am testing lives here: https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/src/pages/Blog/PostCreate/index.js#L24

    <Mutation
      mutation={CREATE_POST}
      update={updatePostCache}
      onCompleted={({ createPost: { id } }) => push(`/posts/${id}`)}
    >
      {mutate => (
        <>
          <H2>Create New Post</H2>
          <PostForm submit={values => mutate({ variables: values })} />
        </>
      )}
    </Mutation>

4) The failing test case lives here: https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/src/pages/Blog/PostCreate/index.test.js#L33

  describe('on form submit', () => {
    it('should handle success', async () => {
      const renderer = renderApp(<App />, ROUTE_PATHS.createPost, [
        fakeCreatePostSuccess,
      ])
      const { formSubmitButton } = fillCreatePostForm(renderer)
      fireEvent.click(formSubmitButton)
      await waitForElement(() => renderer.getByTestId(POST_DETAIL_TEST_ID))
      expect(renderer.getByTestId(POST_DETAIL_TEST_ID)).toBeTruthy()
    })
  })

Possible issues:

I read somewhere that there are problems with the component being wrapped in withApollo maybe withFormik (or any other HOC) is to blame?

Version

• [email protected]
• [email protected]

[developer239]

I have working tests for ListPosts and PostDetail pages. Maybe there is something wrong with mutations in general? 🤔 I noticed that many people have similar problems but all issues are closed because "the fault is in the peoples' code".

[TidyIQ]

I just posted a similar issue - https://github.com/apollographql/react-apollo/issues/3012

There is definitely a bug here somewhere.

[developer239]

@TidyIQ @byronicone I posted the same question on SO and somebody answered but I didn't have time to verify. Can anyone please look at this solution? 🙂🙏

https://stackoverflow.com/a/56255505/4766136

[euanmillar]

Warnings disappear if you add in __typename to the mocked response but it doesn't resolve the No more mocked responses for the query error I'm afraid. I am also getting this using MockedProvider

[euanmillar]

@developer239 I was having the same error but eventually I resolved it the following way:

• Use apollo-client:@2.6.2
• Use react-apollo:@2.5.6
• Make sure that whatever schema you are using locally to test with, matches the remote schema exactly.
• Ensure MockedProvider is setup with addTypename={false}
• Add __typename properties to every nested object in your request / response to clear out the warnings making it easier to find the issue.
• Search through any remaining warnings generated in the test to find any instance of "Missing field ...". This is the crucial part. It tells you which variables have not been included in your mocked request / response. Resolving this, resolves the error.

[aemc]

@euanmillar wouldn't setting addTypename={false} allow you to omit having to add __typename to your request/response objects?

[developer239]

I believe this is fixed now in Apollo 2.17.3 🙂

Also, anyone reading this make sure that mutation variables in your mock query and variables in the query that you are calling in your application have to be the same.

Working example with JWT auth and integration tests is here: https://github.com/developer239/react-apollo-graphql

[smeijer]

make sure that mutation variables in your mock query and variables in the query that you are calling in your application have to be the same.

That part is so important, but also so annoying. It would be awesome if we could use partial matches. Especially for mutations.