Как я могу использовать хуки Apollo React с Storybook? - PullRequest
Новая
       45

Как я могу использовать хуки Apollo React с Storybook?

0 голосов
/ 09 апреля 2020

Я работаю над проектом React, который использует Storybook для макетирования компонентов. Недавно мы представили перехватчики реакции Apollo (то есть 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 /> в сборнике рассказов? Документация , которую я могу найти, кажется, полагается на компоненты Apollo <Query />, а не на хуки.

Или ответ состоит в том, чтобы просто переместить эти шаги извлечения данных в родительские компоненты-оболочки и только издеваться над дочерним компонентом? Я бы предпочел не делать этого, потому что есть случаи, когда я хотел бы смоделировать родительский компонент, который имеет, например, компонент внука со своим собственным useQuery хуком. Извлечение всей последующей выборки данных в обертку вверх по иерархии компонентов выглядит как нарушение принципа, что все должно быть как можно более атомарным c и модульным, насколько это возможно.

1 Ответ

0 голосов
/ 09 апреля 2020

Вы можете обернуть ваш Компонент в 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

...