如何在 Storybook 中使用 Apollo React 钩子？

Question

我正在开发一个使用 Storybook 模拟组件的 React 项目。我们最近引入了 Apollo react 钩子（即useQuery）来获取某些组件的数据。示例：

const Component = () => {
  const { loading, error, data } = useQuery(GET_THING);
  if (loading) return 'Loading!';
  if (!loading && error) return 'Error!';
  return <ComponentChild data={data} />;
}

export default Component;

如何在 Storybook 中模拟 <Component />？我能找到的 documentation 似乎依赖于 Apollo <Query /> 组件而不是钩子。

或者只是将这些数据获取步骤移动到父“包装器”组件中并且只模拟子组件？我宁愿不这样做，因为在某些情况下我想模拟一个父组件，例如，一个孙子组件有自己的useQuery 钩子。将所有下游数据获取拉入组件层次结构中向上的包装器方式感觉违反了事物应尽可能原子化和模块化的原则。

Answer 1

您可以将您的组件包装在MockedProvider：

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

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

<MockedProvider mocks={mocks}>
    <Component />
</MockedProvider>,

见：https://www.apollographql.com/docs/react/development-testing/testing/#mockedprovider