apollo MockedProvider + Storybook 不起作用

Question

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

将我的组件包装在 MockedProvider 中时，它不再抛出没有 Apollo 客户端的错误。所以这证明了MockProvider“有效”

预期结果:

以下 Hook 应返回模拟中的数据:

const { 加载、错误、数据 } = useQuery(LATEST_SELL_SIGNALS)

实际结果:

第一次渲染时加载为true，第二次渲染时加载为false

数据未定义

错误未定义

事实上，加载 Prop 正在工作，也应该表明 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 钩子(Hook):

const { 加载、错误、数据 } = useQuery(LATEST_SELL_SIGNALS)

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

请注意，这一切对于我的普通 Apollo Provider 来说都工作得很好，我只是遇到了 MockProvider 没有做它的事情的问题。

组件。也渲染得很好

版本3.1.4

Answer 1

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

中

import React from 'react'
import { ApolloProvider } from '@apollo/react-hooks'
import { createMockClient } from 'mock-apollo-client'

export const withApolloProvider = ({ requestMockHandlers }) => {
	const mockClient = createMockClient()
	requestMockHandlers.mutations.forEach(mockHandler => {
		mockClient.setRequestHandler(mockHandler.type, mockHandler.handler)
	})
	requestMockHandlers.queries.forEach(mockHandler => {
		mockClient.setRequestHandler(mockHandler.type, mockHandler.handler)
	})
	return storyFn => {
		return <ApolloProvider client={mockClient}>{storyFn()}</ApolloProvider>
	}
}

2. 在 NavBar.stories.js

中

import React from 'react'
import { ThemeProvider } from '@material-ui/core'
import muiTheme from '../../src/theme/muiTheme'
import NavBarDefault from './NavBarDefault'
import './navbar.scss'
import { addDecorator } from '@storybook/react'
import { RESET_CACHE } from '../../src/views/components/NavPanel/gql/mutation'

import gql from 'graphql-tag'
import { withApolloProvider } from '../withApolloProvider'

export default {
	title: 'Component Api|Navbar',
	includeStories: [],
}

const requestMockHandlers = {
	queries: [],
	mutations: [
		{
			type: RESET_CACHE,
			handler: () => {},
		},
	],
}

addDecorator(
	withApolloProvider({
		requestMockHandlers,
	})
)

export const NavBarStory = () => {
	return (
		<ThemeProvider theme={muiTheme}>
			<NavBarDefault />
		</ThemeProvider>
	)
}

3. 在NavBar.stories.mdx

中

import { Meta, Story, Preview,Props } from '@storybook/addon-docs/blocks';
import NavBarDefault from './NavBarDefault'

import * as stories from './NavBar.stories.js';

<Meta title="Component Api|NavBar" />

# NavBar
With `MDX` we can define a story for `Nav Bar` right in the middle of our
markdown documentation.




  <Story name="Basic">
    {stories.NavBarStory()}
  </Story>


```jsx
<NavBarDefault />
```

# PropTypes

<Props of={NavBarDefault}/>