Can't find "client" in testing after wrapping the root component in an <ApolloProvider>

Question

I have a frontend with React and Apollo Client and am trying to write some simple tests.

My app looks like this:

ApolloProvider.js

import React from "react"
import App from "./App"
import ApolloClient from "apollo-client"
import { InMemoryCache } from "apollo-cache-inmemory"
import { createHttpLink } from "apollo-link-http"
import { ApolloProvider } from "@apollo/react-hooks"
import { setContext } from "apollo-link-context"

const httpLink = createHttpLink({
  uri: "...backend....",
})

const authLink = setContext(() => {
  const token = localStorage.getItem("jwtToken")
  return {
    headers: {
      Authorization: token ? `Bearer ${token}` : "",
    },
  }
})

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
})

export default (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
)

App.js

import React from "react"

import { BrowserRouter as Router, Route } from "react-router-dom"
import { Container } from "semantic-ui-react"

import "semantic-ui-css/semantic.min.css"
import "./App.css"

import { AuthProvider } from "./context/auth"
import AuthRoute from "./util/AuthRoute"

import MenuBarTop from "./components/MenuBarTop"

import Home from "./pages/Home"
import Login from "./pages/Login"
import Register from "./pages/Register"
import SingleQuote from "./pages/SingleQuote"

function App() {
  return (
    <AuthProvider>
      <Router className="App">
        {/* or <div class='ui container' ... */}
        <Container>
          <MenuBarTop />
          <Route exact path="/" component={Home} />
          <AuthRoute exact path="/login" component={Login} />
          <AuthRoute exact path="/register" component={Register} />
          <Route exact path="/quotes/:quoteId" component={SingleQuote} />
        </Container>
      </Router>
    </AuthProvider>
  )
}

export default App

App.test.js

import React from "react"
import { render } from "@testing-library/react"
import App from "./App"

test("renders home headers", () => {
  const { getByText } = render(<App />)
  const HomeHeader = getByText("Recent Quotes")
  expect(HomeHeader).toBeInTheDocument()
})

I get an Error in the Home.js Component:

  Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.

      10 | function Home() {
      11 |   const { user } = useContext(AuthContext)
    > 12 |   const { loading, data } = useQuery(FETCH_QUOTES_QUERY)
         |                             ^
      13 | 
      14 |   let quotes = []
      15 | 

I followed the thread on a similar issue about the MockedProvider and tested the proposed solutions there and tried to add @apollo/react-testing.

I've also tried to use a lower component (Home) in the tests but get the same error.

My packages look like this:

name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "^3.1.5",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "apollo-link-context": "^1.0.20",
    "apollo-link-http": "^1.5.17",
    "dotenv": "^8.2.0",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.10.3",
    "jwt-decode": "^2.2.0",
    "moment": "^2.24.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.2"
  },

A comment on React Uncaught Invariant Violation: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an suggests that it could be an error that occurs when one uses "only react-apollo and not react-apollo and @apollo/react-hooks".

However, I am only using @apollo/react-hooks

The Repo is open and here: https://github.com/moritzWa/mentorcards-client

Seventeenth

Answer 1

You can use MockProvider with react-testing-library to test your react component. Read more about MockProvider here.

Try this:

import { act, fireEvent, render } from '@testing-library/react'
import { MockedProvider } from '@apollo/react-testing'

import YourComponent from './path'

const mocks = [
    {
        request: {
            query: Todo,
            variables: {
                query: { name },
            },
        },
        result: {
            data: {
                mockData_here
            },
        },
    },
]

test('it should ...', () => {
  let rendered
  await act(async () => {
    rendered = render(
      <MockedProvider mocks={mocks} addTypename={false}>
          {YourComponent}
      </MockedProvider>
    )
  })
  expect(rendered).toMatchSnapshot()
})

Ululate

Answer 2

I have similar issue. I used two packages @apollo/client and @apollo/react-hoc. I take { Client } from @apollo/client. Also I used { withApollo } from @apollo/react-hoc. That create two different context. I readed that I can replace "old: @apollo/react-hoc --> new: @apollo/client/react/hoc" and it resolve that error in my case.

Sandglass

Please share code snippets/examples. – Oilcup