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

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

我在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。

我还尝试在测试中使用较低的组件（主页），但得到相同的错误。

我的包裹如下：

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. Wrap the root component in an 的评论表明，当一个人仅使用“ react-apollo而不是react-apollo和@apollo/react-hooks”时，可能会发生这种错误。

但是，我仅使用@apollo/react-hooks

回购协议已打开，并且在这里：https://github.com/moritzWa/mentorcards-client

Answer 1

您可以将MockProvider与react-testing-library一起使用来测试您的react组件。详细了解MockProvider here。

尝试一下：

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

Answer 2

我有类似的问题。我使用了两个软件包@ apollo / client和@ apollo / react-hoc。我从@ apollo / client获取{Client}。我也使用了@ apollo / react-hoc中的{withApollo}。那创建了两个不同的上下文。我读到我可以代替 “旧的：@ apollo / react-hoc->新的：@ apollo / client / react / hoc”，它解决了我的情况。

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

2 个答案: