abhiaiyer91 / apollo-storybook-decorator

Wrap your storybook environment with Apollo Client, provide mocks for isolated UI testing with GraphQL
332 stars 34 forks source link

[Help Wanted] Package does not work for me :( #133

Open noobling opened 4 years ago

noobling commented 4 years ago

Test code

import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import apolloStorybookDecorator from 'apollo-storybook-react';
import React from 'react';
import MyComp from '.';

export const actions = {
  onCancelClick: action('onCancelClick'),
};

export const props = {
  _id: 'jifjewoi',
};

const typeDefs = `
  type MessageGroup {
    _id: String
  }
  type Query {
    findMessageGroup: [MessageGroup]
  }

  schema {
    query: Query
  }
`;

const mocks = {
  Query: () => {
    return {
      findMessageGroup: () => {
        return ['abc', 'def'];
      },
    };
  },
};

storiesOf('molecules/MyComp', module)
  .addDecorator(apolloStorybookDecorator({ typeDefs, mocks }))
  .add('default', () => <MyComp someProp='value' />);

My Comp

<div>
  ...
  some code
  ...

  <ComponentWithUseQuery />
</div>

Error

image

Any help appreciated

goooseman commented 4 years ago

I faced the same problem and I resolved it by explictly passing Provider in plugin options in Storybook config.js file:

import { ApolloProvider } from "@apollo/react-hooks";
addDecorator(
  apolloStorybookDecorator({
    typeDefs: schema,
    mocks,
    Provider: ApolloProvider,
  }),
);
j-edward commented 4 years ago

Worked for me, thank you @goooseman. Not quite sure as to why you need to specify a hooks provider, shouldn't the package by default set this up?