MockProvider returns undefined in the render for the mockdata passed

[Brad19]

Hi,

Thanks for the huge community support.

We're facing an issue similar to others using MockProvider which returns undefined when the mock data is passed. I saw few of the issues raised in this forum. I've tried those. But didn't work.

Here is our env details

• react-native - 0.72.4
• testing-library/react-native - 12.1.2
• apollo/client - 3.8.6
• jest - 29.2.1
• node - 18.x

I thought of trying your sample tests as mentioned down below which is taken from github.com/apollographql/apollo-client/blob/main/src/testing/react/tests/MockedProvider.test.tsx with a little tweak of not passing the variables.

Even then it didn't work. What works is if we mock the useQuery inside the tests something like this.

(useQuery as jest.Mock).mockReturnValue({
loading: false,
error: undefined,
data: { user : { id : 1}}
})

Please advise how to fix this with MockProvider or something that i'm missing or should we need to follow the recommendations from your RFC: Revisiting Apollo Client's testing approach

const userWithoutTypeName = {
  user: {
    id: 'user_id',
  },
};

const user = {
  __typename: 'User',
  ...userWithoutTypeName,
};

const query: DocumentNode = gql`
  query GetUser {
    user {
      id
    }
  }
`;

const mocks: ReadonlyArray<MockedResponse> = [
  {
    request: {
      query,
      variables: {},
    },
    result: { data: { user } },
  },
];

interface Data {
  user: {
    id: string;
  };
}

interface Variables {
  username: string;
}

describe('General use', () => {
  // beforeEach(() => {
  //   errorThrown = false;
  // });

  itAsync('should mock the data', (resolve, reject) => {
    let finished = false;
    function Component() {
      const { loading, data } = useQuery<Data, Variables>(query);
      console.log('data :', data);
      if (!loading) {
        expect(data!.user).toMatchSnapshot();
        finished = true;
      }
      return null;
    }

    render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <Component />
      </MockedProvider>,
    );

    waitFor(() => {
      expect(finished).toBe(true);
    }).then(resolve, reject);
  });
});

[bignimbus]

Hi @Brad19 👋🏻 I recommend sharing more details, ideally in the form of a runnable reproduction so that we can see the errors you see. Have you tried omitting variables from your mocks object? That's the only thing that jumps out to me.

[Brad19]

Hi @bignimbus
I tried removing the variables as well. Also to reproduce at your end, I'll have to create a separate repo and share it with you which will take some time. If thats the only way, then i can do it as well. But If anything other than that ring a bell, Please let me know.

---

Update....

Found out the issue.. coz its a shared repo i found that there was an entry added in the jest.setup to mock the apollo-client as follows. When i removed that MockedProvider started working fine..

jest.mock('@apollo/client', () => ({
  ...jest.requireActual('@apollo/client'),
   useQuery: jest.fn(),
}));

Thanks,
Brad

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.