Reactjs 阿波罗';s MockedProvider不';t为封装在Apollo中的组件提供客户端

Reactjs 阿波罗';s MockedProvider不';t为封装在Apollo中的组件提供客户端,reactjs,enzyme,apollo,Reactjs,Enzyme,Apollo,在测试用Apollo包装的组件时,我使用Apollo文档中指定的Apollo的MockedProvider,但是当Ezyme尝试渲染该组件时,渲染器找不到MockedProvider应该提供的客户端 我有一个组件在Apollo上下文中使用useQuery export const QUERY=gql`{value}` export const Component=withApollo({client)=>{ const{data}=useQuery(查询) 返回{data} }) 所以我想测试

在测试用Apollo包装的组件时,我使用Apollo文档中指定的Apollo的MockedProvider,但是当Ezyme尝试渲染该组件时,渲染器找不到MockedProvider应该提供的
客户端

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

export const QUERY=gql`{value}`
export const Component=withApollo({client)=>{
const{data}=useQuery(查询)
返回{data}

})
所以我想测试一下:

description('Component',()=>{
常数模拟=[{
请求:{query:query},
结果:{数据:42}
}]
常量包装组件=({children})=>
{儿童}
WrappingComponent.propTypes={
孩子们:有吗
}
常量组件=浅(,{wrappingComponent:wrappingComponent})
它('与快照匹配',()=>{
expect(enzymeToJson(component)).toMatchSnapshot()
})
}
在这种情况下,快照结果是

exports[`CruxProductSetup与快照1`]匹配=`
`;
不是我的组件,所以我耍了个小把戏,试着进去:

const component=shallow(shallow(,{wrappingComponent:wrappingComponent}).get(0))
快照是:

导出[`组件与快照1`]匹配=`
`;
仍然没有用。我的组件尚未渲染。我再次执行此操作:

const component=shallow(shallow(shallow(,{wrappingComponent:wrappingComponent}).get(0)).get(0))
在拍摄快照之前,Ezyme会抛出以下错误:

 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)

我也有同样的问题。原来安装了
react-apollo
@apollo/react-hooks
导致了这个问题。删除了
react-apollo-dependecy

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


只需将@apollo/react hooks和@apollo/react testing升级到v4.0.0就解决了这个问题。

有了这个确切的问题……出于某种原因,我无法让测试与浅安装一起工作,而深安装会抛出令人沮丧的无法修复的“act”相关错误。
@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