apollo MockedProvider + Storybook 不工作

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
      }
    }
  }
`

我正在包装的组件正在使用这样的反应钩子：

const { loading, error, data } = 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}/>

Answer 2

模拟结果的形状必须与查询完全相同，否则useQuery 的data 的值将是undefined。

由于查询是

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

因此模拟数据的结果必须是

result: {
  data: {
    latestSellSignalsList: {
      items: [
        { 
          name: 'Storybook Data', 
          ticker: 'STB', 
          boughtAt: 'boughtAt', 
          soldAt: 'soldAt'
        }
      ],
    },
  },
},
    

更新的故事

import React from 'react';
import { gql, useQuery } from '@apollo/client';
import { MockedProvider } from '@apollo/client/testing';

export default {
  title: 'MockedProvider',
};
const LATEST_SELL_SIGNALS = gql`
  query {
    latestSellSignalsList(orderBy: "desc", first: 10) {
      items {
        name
        ticker
        boughtAt
        soldAt
      }
    }
  }
`;

const mocks = [
  {
    request: {
      query: LATEST_SELL_SIGNALS,
    },
    result: {
      data: {
        latestSellSignalsList: {
          items: [
            { name: 'Storybook Data', ticker: 'STB', boughtAt: 'boughtAt', soldAt: 'soldAt' },
          ],
        },
      },
    },
  },
];

const LatestSells = () => {
  const { loading, error, data } = useQuery(LATEST_SELL_SIGNALS);
  console.log('LatestSells', { loading, data });
  return <div>{JSON.stringify(data)}</div>;
};

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

控制台输出：