时间戳

首页 > 解决方案 > Apollo 的 MockedProvider 不为包装在 withApollo 中的组件提供客户端

reactjs - Apollo 的 MockedProvider 不为包装在 withApollo 中的组件提供客户端

问题描述

在测试用 Apollo 包装的组件时，我正在使用 Apollo 文档中指定的 Apollo 的 MockedProvider，但是当酶尝试渲染该组件时，渲染器找不到clientMockedProvider 应该提供的。

我有一个useQuery在 Apollo 上下文中使用的组件。

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

所以我想测试它：

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

在这种情况下，快照结果是

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

不是我的组件，所以我做了一个技巧并尝试进入：

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

快照是：

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

还是没用。我的组件尚未渲染。我又做了一次：

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

在拍摄快照之前，酶会抛出此错误：

 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>“？我以为这就是MockedProvider正在做的事情。

我的依赖：

@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

标签： reactjsenzymeapollo

解决方案

我正在使用与您相同版本的@apollo/react-testing，而不是 react-apollo，我使用的是 @apollo/react-hooks，我今天遇到了同样的错误。

只需将 @apollo/react-hooks 和 @apollo/react-testing 升级到 v4.0.0 即可解决我的问题。

推荐阅读