When using client directives in part in MockedProvider, it doesn't work.

[souchi]

I'm sorry for my poor English.
When using client directives in part in MockedProvider, it doesn't work.

Intended outcome:

It's can be execute without error.

Actual outcome:

Does't work with the following error.

Error
Objects are not valid as a React child (found: Error: Network error: No more mocked responses for the query: query SelectedPage {
  page @client {
    selectedPage
  }
  pagesInfo {
    pageId
    title
  }
}
, variables: {}). If you meant to render a collection of children, use an array instead.
    in h2 (at App.js:50)
    in div (at App.js:49)
    in TestTitle (at App.js:65)
    in ApolloProvider (created by MockedProvider)
    in MockedProvider (at App.js:64)
    in div (at App.js:63)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

But if add all @client or not add all, it works.

const Query = gql`
query SelectedPage {
  page @client {
    selectedPage
  }
  pagesInfo @client {
    pageId
    title
  }
}`

How to reproduce the issue:

https://codesandbox.io/s/competent-black-18fnt

Versions

System:
OS: Windows 10 10.0.18362
Binaries:
Node: 12.16.2 - C:\Program Files\nodejs\node.EXE
npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
@apollo/react-testing: 3.1.4 => 3.1.4
apollo-cache-inmemory: 1.6.6 => 1.6.6
apollo-client: 2.6.10 => 2.6.10
react-apollo: 3.1.5 => 3.1.5

[kkak10]

+1 i have same issue on 3.0.1 version

[mazhuga]

same here

[JimboFromLimbo]

+1 same issue here

[JimboFromLimbo]

Replying to this because I found a solution after about 3 hours. Basically you need to provide it with the same type policy schema as your apps root expect where you would normally return your reactive var, you return the desired object/mock.

There really needs to be some better documentation around the MockProvider as a whole.

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        someCoolLocalState: {
          read() {
            return [
              {
                id: ''
              }
            ]
          }
        }
      }
    }
  }
})

  return render(
    <MockedProvider addTypename={false} cache={cache}>
      <Provider >{Component}</Provider>
    </MockedProvider>
  )
}

[kkak10]

@JamesDInnes your solution working to me but I don't know if it's a fundamental solution. and break another state test that final state and error state...

[JimboFromLimbo]

@kkak10 yeah, I have requested in #6711 for better documentation around this whole thing as it is not really clear

[kkak10]

@JamesDInnes Good! Thank you

[hwillson]

We're tracking this in #6711, so we'll close this issue off. Thanks!