I’ve run into this exact issue with Apollo’s MockedProvider before — let’s break down the most likely causes and fixes for your error:

Common Causes & Fixes #

1. Strict Variable Matching Failure #

Apollo’s MockedProvider uses exact variable matching to find the right mock response. If the variables your test sends via the form don’t perfectly match what’s defined in fakeCreatePostSuccess, it won’t find the mock and throw that error.

• Debug step: Log the values your form submits. Add a console.log(values) inside the mutate call in your component, or in the test, grab the input field values after filling the form and compare them to fakeCreatePostSuccess.request.variables.
• Fix: Ensure every variable (including whitespace, capitalization, and text length) is identical between your test input and the mock. For example, if your form’s text input adds an extra space at the end, the mock won’t match.

2. Query String Mismatch #

Even if you’re importing the same CREATE_POST mutation, tiny differences in the GraphQL query string (like extra newlines, spaces, or field order) can cause the MockedProvider to fail to match. Apollo uses a hash of the query string to look up mocks, so even a single extra space breaks the match.

• Debug step: Print the stringified version of both the mock’s query and the component’s mutation:

  // In your test
  console.log(fakeCreatePostSuccess.request.query.toString())
  // In your component
  console.log(CREATE_POST.toString())
  

  Compare the outputs — if they’re not identical, that’s the problem.
• Fix: Make sure you’re using the exact same CREATE_POST export everywhere (no duplicate definitions in other files) and avoid manually editing the query string in any place.

3. Unmocked Follow-Up Query #

Your mutation’s onCompleted handler triggers a redirect to /posts/${id}, which likely loads a PostDetail component that runs a getPost (or similar) query. If that query isn’t mocked, the MockedProvider will throw the "no more mocked responses" error for this follow-up query, not the original createPost mutation.

• Debug step: Check the full error message — it should specify which query is missing a mock. If it’s a getPost query instead of createPost, this is the issue.
• Fix: Add a mock for the PostDetail query to your test’s mock array:

  // Example mock for a getPost query
  export const fakeGetPostSuccess = {
    request: {
      query: GET_POST, // Your post detail query
      variables: { id: '1' },
    },
    result: {
      data: {
        getPost: {
          id: '1',
          title: 'Mock Title',
          text: 'Mock lorem ipsum text. And another paragraph.',
        },
      },
    },
  }
  
  // Update your test to include this mock
  const renderer = renderApp(<App />, ROUTE_PATHS.createPost, [
    fakeCreatePostSuccess,
    fakeGetPostSuccess, // Add this line
  ])
  

4. Incorrect MockedProvider Initialization #

Double-check your renderApp function to ensure it’s correctly passing the mocks array to the MockedProvider. If the function is overriding or ignoring the mocks you pass, your createPost mock won’t be loaded.

• Debug step: Inspect the renderApp implementation to confirm it’s rendering the MockedProvider with mocks={passedMocks}.
• Fix: Adjust renderApp to correctly forward the mocks array to the MockedProvider component.

Quick Test to Narrow Down the Issue #

To isolate the problem, temporarily simplify your test:

1. Remove the update and onCompleted props from the Mutation component.
2. Run the test again — if it works, the issue is with the follow-up redirect/query.
3. If it still fails, focus on variable or query string matching.

内容的提问来源于stack exchange，提问作者Michal