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

Answer 1

在我的项目中，我使用从ApolloProvider导入的createMockClient和mock-apollo-client为我的故事书创建模拟客户端。有我的组件。希望它能对您有所帮助。
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}/>

阿波罗MockedProvider +故事书不起作用

1 个答案: