apollo MockedProvider +故事书不起作用

Question

在Storybook中使用MockedProvider似乎没有返回任何内容。

当将我的组件包装在MockedProvider中时，它不再引发没有Apollo客户端的错误。因此，这证明了MockProvider是“有效的”

预期结果：

以下钩子应返回模拟中的数据：

const { loading, error, data } = useQuery(LATEST_SELL_SIGNALS)

实际结果：

在第一个渲染上加载为true，在第二个渲染上加载为false

数据是undefined

错误是undefined

加载道具正在工作的事实，也应该表明MockedProvider正在运行。

示例故事：

import React from 'react'
import { MockedProvider } from '@apollo/react-testing'

import { LATEST_SELL_SIGNALS } from '~/common/queries'
import LatestSells from './LatestSells'

const mocks = [
  {
    request: {
      query: LATEST_SELL_SIGNALS,
    },
    result: {
      data: {
        yourData: { name: 'Storybook Data' },
      },
    },
  },
]


export default {
  title: 'Sales Components'
}

export const latest_sells = () => {
  return (
      <MockedProvider mocks={mocks}>
        <LatestSells />
      </MockedProvider>
  )
}

其中LATEST_SELL_SIGNALS是此文件：

import { gql } from 'apollo-boost'

export const LATEST_SELL_SIGNALS = gql`
  query {
    latestSellSignalsList(orderBy: createdAt_DESC, first: 10) {
      items {
        name
        ticker
        boughtAt
        soldAt
      }
    }
  }
`

我正在包装的组件正在使用像这样的React钩子：

const { loading, error, data } = useQuery(LATEST_SELL_SIGNALS)

查询的导入在组件中与在模拟中相同

请注意，这一切对于我正常的Apollo Provider都可以正常工作，我只是MockProvider遇到问题而已。

组件。也很好[]

版本

3.1.4

在Storybook中使用MockedProvider似乎没有返回任何内容。将我的组件包装在MockedProvider中时，它不再抛出没有Apollo客户端的错误。因此，这证明...

Answer 1

[在我的项目中，我使用从ApolloProvider导入的createMockClient和mock-apollo-client为我的故事书创建模拟客户端。有我的组件。希望它能对您有所帮助。1.在withApolloProvider.js