MockedProvider is extremely difficult to use

[cameracker]

Intended outcome:
I was attempting to use the mocked provider to do some jest tests with react-testing-library. I was expecting the MockedProvider to cause the component to receive the mocked result from the useQuery hook in my component and be done.

Actual outcome:

1. The MockedProvider forced me to either explicitly enumerate the typename of every single object in the mock request before it would work, or disable typenames entirely. The typenames are needed partially when dealing with union queries, and it really sucks to have to put them on everything in order to leverage them for the union.

2. The MockedProvider returned a loading state only, and never made it past that unless I wrapped the render function in an act

Figuring out how to deal with these problems was extremely time consuming

How to reproduce the issue:

Versions
System:
OS: Linux 5.4 Ubuntu 18.04.4 LTS (Bionic Beaver)
Binaries:
Node: 12.16.1 - /usr/local/lib/nodejs/node-v12.16.1-linux-x64/bin/node
Yarn: 1.19.2 - /usr/bin/yarn
npm: 6.13.4 - /usr/local/lib/nodejs/node-v12.16.1-linux-x64/bin/npm
Browsers:
Chrome: 78.0.3904.108
Firefox: 81.0
npmPackages:
@apollo/react-common: 3.1.1 => 3.1.1
@apollo/react-components: 3.1.1 => 3.1.1
@apollo/react-hoc: 3.1.1 => 3.1.1
@apollo/react-hooks: 3.1.1 => 3.1.1
@apollo/react-testing: ^3.1.1 => 3.1.1
apollo-cache: ^1.3.2 => 1.3.2
apollo-cache-inmemory: ^1.6.3 => 1.6.3
apollo-client: ^2.6.4 => 2.6.4
apollo-link: ^1.2.12 => 1.2.12
apollo-link-debounce: ^2.1.0 => 2.1.0
apollo-link-error: ^1.1.13 => 1.1.13
apollo-link-http: ^1.5.15 => 1.5.15
apollo-link-mock: ^1.0.1 => 1.0.1
apollo-link-ws: ^1.0.20 => 1.0.20
apollo-utilities: ^1.3.2 => 1.3.2
react-apollo: 3.1.1 => 3.1.1

This is a tedious experience and violates the basic expectations of a mock. When I'm using a mock, I simply want it to return the dummy state I specify in the setup. The interface of the mock implies that it will do that, but instead it also has the overhead of requiring the user to deal with the asynchronous loading. And then on top of that, its pedantic about what shape the data needs to be. Instead, a much better interface would be to allow the mock to specify exactly what should be returned by the query hook, IE

const mocks = [
  request: {
    query: QUERY_DOCUMENT, //the query document constant
    variables: {...},
  },
  response: {
    data: {},
    loading:  {},
    refetch: {},
  }
] 

[simkessy]

What do you mean by this:

The MockedProvider returned a loading state only, and never made it past that unless I wrapped the render function in an act

[mattfwood]

There was a previous effort to improve error messaging with MockedProvider and there was a pull request for it, but i think it may have gotten lost in the old repo:
apollographql/react-apollo#2883

I might see if i can recreate this PR with the current setup for Apollo but i know it's several versions behind.

[johnnywang]

Was there ever any follow up to this? It's still pretty difficult to tell why a particular mock is failing, two years later

[jerelmiller]

Hey @johnnywang 👋 !

We have a plan to revisit our testing approach at some point to make testing much more robust. We recognize MockedProvider has its faults/limitations and hope a new approach can address the many issues/requests we've had about it.

If you've got specific ideas in mind, feel free to add your ideas to that issue!