1

我正在开发一个使用 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;

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

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

4

1 回答 1

0

您可以将组件包装在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

于 2020-04-09T20:09:30.783 回答