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

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

1 个答案: