将根组件包装在 <ApolloProvider> 中后，在测试中找不到“客户端”

Question

我有一个带有 React 和 Apollo Client 的前端，并且正在尝试编写一些简单的测试。

我的应用程序如下所示：

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>
)

应用程序.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

应用程序.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()
})

我在 Home.js 组件中收到错误：

  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 | 

我关注了有关MockedProvider的类似问题的线程，并在那里测试了建议的解决方案，并尝试添加@apollo/react-testing.

我还尝试在测试中使用较低的组件（Home），但出现相同的错误。

我的包裹看起来像这样：

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"
  },

关于React Uncaught Invariant Violation: Could not find "client" in the context of ApolloConsumer 的评论。将根组件包裹在 an 中react-apollo表明这可能是当使用“only and not react-apolloand ”时发生的错误@apollo/react-hooks。

然而，我只使用@apollo/react-hooks

回购协议已开放，位于： https: //github.com/moritzWa/mentorcards-client

Answer 1

您可以使用MockProviderwithreact-testing-library来测试您的反应组件。阅读更多有关MockProvider 此处的信息。

尝试这个：

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()
})