Apollo's MockedProvider doesn't provide a client for components wrapped in withApollo

Question

While testing a component wrapped in withApollo, I'm using Apollo's MockedProvider as specified in Apollo's documentation, but when enzyme tries to render that component, the renderer doesn't find the client that MockedProvider should have provided.

I have a component that uses useQuery in an Apollo context.

export const QUERY = gql`{ value }`
export const Component = withApollo(({ client ) => {
    const { data } = useQuery(QUERY)
    return <p>{ data }</p>
})

So I want to test it:

describe('Component', () => {
    const mocks = [{
        request: { query: QUERY },
        result: { data: 42 }
    }]
    const WrappingComponent = ({ children }) => <MockedProvider mocks={ mocks } addTypename={ false }>
        { children }
    </MockedProvider>
    WrappingComponent.propTypes = {
        children: PropTypes.any
    }
    const component = shallow(<Component />, { wrappingComponent: WrappingComponent })

    it('matches the snapshot', () => {
        expect(enzymeToJson(component)).toMatchSnapshot()
    })
}

In this case, the snapshot turns out to be

exports[`CruxProductSetup matches the snapshot 1`] = `
<ApolloConsumer>
  <Component />
</ApolloConsumer>
`;

Not my component, so I do a trick and try to get inside:

    const component = shallow(shallow(<Component />, { wrappingComponent: WrappingComponent }).get(0))

And the snapshot is:

exports[`Component matches the snapshot 1`] = `
<ContextConsumer>
  <Component />
</ContextConsumer>
`;

Still not useful. My component hasn't been rendered yet. I do the trick once more:

const component = shallow(shallow(shallow(<Component />, { wrappingComponent: WrappingComponent }).get(0)).get(0))

And before the snapshot is taken, enzyme throws this error:

 FAIL  Component/__tests__/index.js
  Component
    ✕ encountered a declaration exception (75ms)

  ● Component › encountered a declaration exception

    Invariant Violation: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>.

      85 |     })
      86 |
    > 87 |     const component = shallow(shallow(shallow(<Component />, { wrappingComponent: WrappingComponent }).get(0)).get(0))
      88 |     // const component = shallow(shallow(shallow(<Component />, { wrappingComponent: WrappingComponent }).get(0)).get(0))
      89 |     // const component = shallow(shallow(shallow(<CruxProductSetup summaryPanel={ null } />, { wrappingComponent: WrappingComponent }).get(0)).get(0))
      90 |

      at new InvariantError (node_modules/ts-invariant/lib/invariant.esm.js:12:28)
      at invariant (node_modules/ts-invariant/lib/invariant.esm.js:24:15)
      at Object.children (node_modules/@apollo/react-common/lib/react-common.cjs.js:55:132)
      at Object.type (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:612:30)
      at ReactShallowRenderer.render (node_modules/enzyme-adapter-react-16/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:104:34)
      at node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:615:53
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/src/Utils.js:99:18)
      at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:615:18)
      at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:411:22)
      at shallow (node_modules/enzyme/src/shallow.js:10:10)
      at Suite.<anonymous> (Component/__tests__/index.js:87:23)
      at Object.<anonymous> (Component/__tests__/index.js:61:1)

"Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>"? I thought that was what MockedProvider was doing.

My dependencies:

@apollo/react-testing: 3.1.3
enzyme: 3.11.0
graphql-tag: 2.10.1
jest: 22.4.4
react: 16.12.0
react-apollo: 3.1.3

Answer 1

I'm using the same version of @apollo/react-testing as yours and instead of react-apollo, I'm using @apollo/react-hooks and I encountered the same error today.

Just upgrading @apollo/react-hooks and @apollo/react-testing to v4.0.0 fixed the problem for me.

Answer 2

I had the same problem. Turns out having installed react-apollo and @apollo/react-hooks was causing it. Removed the react-apollo dependecy.