React-apollo: Could not find "client", using MockProvider (apollo/react-testing 3.1.1 & apollo/react-hooks 3.1.2)

[yosiawan]

Intended outcome:
Test a component with MockProvider

Actual outcome:
Error is thrown "Could not find "client" in the context or passed in as an option. Wrap the root component in an , or pass an ApolloClient instance in via options."

How to reproduce the issue:

import { MockedProvider } from "@apollo/react-testing"
import { render } from "@testing-library/react"

import CCChatList from "./CCChatList"

let emptyMock: any[] = []
let mockOnClick = jest.fn()

describe('CCChatList Tests', () => {
  it('renders without error', () => {
    render(
      <MockedProvider mocks={emptyMock} addTypename={false}>
        <CCChatList activeChat="" phoneNumber="" onClick={mockOnClick} />
      </MockedProvider>
    )
  })

  it('renders loading screen when loading', () => {
    const component = render(
      <MockedProvider mocks={emptyMock} addTypename={false}>
        <CCChatList activeChat="" phoneNumber="" onClick={mockOnClick} />
      </MockedProvider>
    )

    component.getByText('Loading Messages. . .')
  })
})

Version
System:
OS: macOS Mojave 10.14.6
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Browsers:
Chrome: 77.0.3865.90
Firefox: 68.0.2
Safari: 13.0.1
npmPackages:
@apollo/react-hooks: ^3.1.2 => 3.1.2
@apollo/react-testing: ^3.1.1 => 3.1.1
apollo-boost: ^0.4.3 => 0.4.4
apollo-client: ^2.6.4 => 2.6.4
apollo-link-error: ^1.1.12 => 1.1.12
apollo-link-logger: ^1.2.3 => 1.2.3
apollo-link-retry: ^2.2.15 => 2.2.15
apollo-link-ws: ^1.0.18 => 1.0.18
react-apollo: ^2.5.8 => 2.5.8

[riccoski]

Are you using any Components from react-apollo? If so you may need to upgrade to 3.x

[yosiawan]

Are you using any Components from react-apollo? If so you may need to upgrade to 3.x

No, I only used hooks from react-hooks

[atkinchris]

I'm getting the same error when using @apollo/react-hooks: 3.1.3, react-apollo: 3.1.2 and @apollo/react-testing: 3.1.2.

I have a component containing Query. This works at runtime, nested within ApolloProvider. This throws the observed error when inside tests, nested in MockedProvider.

Updating all packages to 3.1.3 did not resolve the error - I instead took @apollo/react-hooks back to 3.1.2.

[ckhericks]

I'm having the same issue:
Running:
@apollo/react-hooks": "^3.0.1,
apollo-boost: 0.4.4 (latest, not sure what client that translates to)
@apollo/react-testing: 3.1.3
I'll see if we can update but I may be constrained by other requirements.

[pawelkleczek]

check comment https://github.com/apollographql/react-apollo/issues/3508#issuecomment-536569105

You might have two contexts. Check if you have react-common both in node_modules/@apollo and node_modules/@apollo/react-testing/node_modules. If yes, then react-testing and react-hooks are using different context.

[ckhericks]

check comment #3508 (comment)

You might have two contexts. Check if you have react-common both in node_modules/@apollo and node_modules/@apollo/react-testing/node_modules. If yes, then react-testing and react-hooks are using different context.

This fixed it for me! Thank you so much!

[dtfraighter]

Any updates on this? #3508 did not fix it for me

[dtfraighter]

UPDATE: Not ideal, but changed "@apollo/react-testing" from ^3.1.2 to 3.0.0 resolved it. And "@apollo/react-hooks" is at ^3.1.0 and all is working now

[jawakarD]

I'm facing the issue too, it was working fine until i introduced @apollo/client(was using apollo-boost) because i have to use subscriptions. Could it be because @apollo/react-testing imports ApolloProvider from react-common and in my app I'm using @apollo/client to import the provider.

This set up is really not going well with lots of packages doing the same thing. Is there any better way?

[jawakarD]

This is fixed by changing the way I use apollo hooks, I have been importing useQuery from @apollo/client when i changed to @apollo/react-hooks It's working. Couldn't understand why.

[mistyjae]

I am facing this issue when using
import { MockedProvider } from '@apollo/client/testing', and change to import { MockedProvider } from '@apollo/react-testing' it working.

"@apollo/client": "3.0.0-beta.40",
"@apollo/link-context": "2.0.0-beta.3",
"@apollo/react-hooks": "3.1.3",
"@apollo/react-testing": "3.1.3",

[frolovdev]

I have a solution, that works for me in 100% cases. I use @apollo/react-hooks Copy source code from mockedProvider and change ApolloProvider from @apollo/react-common to

import {ApolloProvider} from "@apollo/react-hooks"

and reimplement MockedProvider by myself

[insidewhy]

Is this a case of "should be using peer dependency instead of dependency"?

[ardok]

I commented here:
https://github.com/apollographql/react-apollo/issues/2900#issuecomment-621756066

Essentially, in my personal case, I just need to make sure to have this:

@apollo/react-hooks ^3.1.5 ==> this is the "fix" for me, making sure > 3.1.5

// Using
@apollo/react-testing 3.1.4

[annabfenske]

check comment #3508 (comment)

You might have two contexts. Check if you have react-common both in node_modules/@apollo and node_modules/@apollo/react-testing/node_modules. If yes, then react-testing and react-hooks are using different context.

@pawelkleczek If this is the case, what steps can be taken to correct this?

[jeffvandyke]

Thanks @ardok, that fixed it for me. It helps to have things up-to-date with these kind of inter-dependent package issues.

[bluedot74]

check comment #3508 (comment)
You might have two contexts. Check if you have react-common both in node_modules/@apollo and node_modules/@apollo/react-testing/node_modules. If yes, then react-testing and react-hooks are using different context.

@pawelkleczek If this is the case, what steps can be taken to correct this?

I had this issue and finally got it working after an infuriating day of debugging.
I believe my root issue was that I had too many Apollo packages installed. I had react-apollo, apollo-cache-inmemory, apollo-boost, @apollo/react-testing, and @apollo/react-hooks. The best I can tell is that this was creating the two contexts @pawelkleczek described.

My solution was to remove all the apollo packages I had, then carefully add only the ones I explicitly needed. For me, that was apollo-boost (For the client, links, and inmemory cache), apollo-utilities (for some ID functions), @apollo/react-hooks for the hooks. Then finally in devDependencies @apollo/react-testing for the MockedProvider and tools.

I think the idea is that you either go with apollo-boost or you installed the packages it provides directly, but never mix them.

This finally fixed the Could not find "client" in the context or passed in as an option. while using MockedProvider issue for me.