React-apollo: MockedProvider doesn't return provided data

[TidyIQ]

Intended outcome:

I'm following the guide here - https://www.apollographql.com/docs/react/recipes/testing

I'm trying to test the following query:

export const QUERY_USERS = gql`
  query users {
    users {
      id
      orgId
      name
      email
      password
      role
    }
  }
`;

export const getUsers = graphql(QUERY_USERS, {});

By using this as my test:

import React, { Fragment } from "react";
import { render, cleanup } from "react-testing-library";
import { MockedProvider } from "react-apollo/test-utils";

import { getUsers, QUERY_USERS } from "./api";

afterEach(cleanup);

const TestUsersWrapped = ({ data }) => {
  console.log(data);
  return (
    <Fragment>
      {data.users.map(user => {
        return user !== undefined ? (
          <div key={user.id}>
            <p>id: {user.id}</p>
            <p>orgId: {user.orgId}</p>
            <p>name: {user.name}</p>
            <p>email: {user.email}</p>
            <p>password: {user.password}</p>
            <p>role: {user.role}</p>
          </div>
        ) : (
          <div>Error</div>
        );
      })}
    </Fragment>
  );
};
const TestUsersComponent = getUsers(TestUsersWrapped);

const usersMock = [
  {
    request: {
      query: QUERY_USERS
    },
    result: {
      data: {
        users: [
          {
            id: 1,
            orgId: 1,
            name: "Test User",
            email: "[email protected]",
            password: "hashedpassword",
            role: "user"
          }
        ]
      }
    }
  }
];

describe("API: 'users' query", () => {
  it("renders as snapshot", () => {
    const { asFragment } = render(
      <MockedProvider mocks={usersMock} addTypename={false}>
        <TestUsersComponent />
      </MockedProvider>
    );
    expect(asFragment()).toMatchSnapshot();
  });
});

This is exactly how the documentation says to do it. It should return an array of all users. It works fine in production when actually fetching from the server.

Here's the console.log from when it's used in production:

error: undefined
fetchMore: ƒ ()
loading: false
networkStatus: 7
refetch: ƒ ()
startPolling: ƒ ()
stopPolling: ƒ ()
subscribeToMore: ƒ ()
updateQuery: ƒ ()
users: []
variables: {}
__proto__: Object

As you can see, it returns the users like it's supposed to (which is empty at this stage in production as there are no users stored in our db as yet).

Actual outcome:

The test fails as data does not return users that is clearly provided in the mock within MockedProvider.

This is the console.log output from the code above:

    console.log api/api.test.tsx:10
      { variables: {},
        refetch: [Function],
        fetchMore: [Function: bound ],
        updateQuery: [Function: bound ],
        startPolling: [Function: bound ],
        stopPolling: [Function: bound ],
        subscribeToMore: [Function: bound ],
        loading: true,
        networkStatus: 1,
        error: undefined }

Error: Uncaught [TypeError: Cannot read property 'map' of undefined]

How to reproduce the issue:

Use the code provided above.

Version

• [email protected]
• [email protected]

[steelx]

Im also facing same issue

[colinlmcdonald]

@TidyIQ I'm not sure why that is working in production, but data is set to undefined when in a loading state. You'll notice in the docs that if any of the non-data states are true (loading or error) then it will exit before rendering a component requiring data.

[tylervanbrocklin]

Also facing this issue.

[erkde]

@TidyIQ - have you tried waiting for the final state, in the docs, if you scroll down a bit, you'll see you need to wait for the MockedProvider to return data:

https://www.apollographql.com/docs/react/recipes/testing/#testing-final-state

[chrisbchrist]

I'm facing this issue even after trying several methods to wait, both waait and wait-for-expect still either return a component that's stuck on loading or with errors. We're having a hard time figuring out what the issue is, as everything works fine with an actual API and we're using the exact response the server was returning as our mock.

[erkde]

@chrisbchrist - if you're getting an error from the query, then it seems it has tried to run it - what is the error message?

The usual one seems to be the query that executes during the test, doesn't quite match any of those configured in mocks array given to the MockedProvider, such as one of the variables passed to the query

[chrisbchrist]

It was the 'No more mocked responses for the query' error. We were able to sort it out, one of our parameters was being coerced into a string, so the problem was on our end. Although I would humbly suggest some more verbose error warnings when the data result is not matching up with the query/schema, it was a lot of trial and error to track down the source of the problem. Keep up the good work!

[developer239]

I believe it is fixed now. A working example is here: https://github.com/developer239/react-apollo-graphql

[hwillson]

React Apollo has been refactored to use React Hooks behind the scenes for everything, which means a lot has changed since this issue was opened (and a lot of outstanding issues have been resolved). We'll close this issue off, but please let us know if you're still encountering this problem using React Apollo >= 3.1.0. Thanks!