storybook-addon-apollo-client icon indicating copy to clipboard operation
storybook-addon-apollo-client copied to clipboard

Storyshots support?

Open yale opened this issue 4 years ago • 10 comments

Hey there! Does anyone have any experience getting this addon to work with Storyshots? The Storyshots docs says to explicitly export the decorator in the .storybook/preview.js file. However, with the latest version it seems the decorator function is no longer supported or exported.

yale avatar Feb 19 '21 17:02 yale

I think I figured it out! I added this to .storybook/preview.js:

import { WithApolloClient } from 'storybook-addon-apollo-client/dist/decorators';

...

 export const decorators = [
  WithApolloClient,
  ...
];

yale avatar Feb 22 '21 15:02 yale

Hey @yale, thank you so much for sharing your solution. Unfortunately, I still have problems with getting this add-on to work with Storyshots. It looks like MockedProvider is still not passing mocked data to a component. Can you please share the code of one of your stories or explain how did you configure them? It would be a great help :smile:

przlada avatar Mar 26 '21 12:03 przlada

@przlada Sure! Here's an abridged and modified example from a codebase I work in. Note that this is using Typescript:

import React from 'react';
import { Story } from '@storybook/react';
import { resource } from '/domains/resource/fixtures';

import DownloadRenderer, { IDownloadRendererProps } from '.';

import {
  graphqlMock1,
  graphqlMock2,
  graphqlMock3
} from './fixtures';

const Template: Story<IDownloadRendererProps> = (args) => (
  <DownloadRenderer {...args} />
);

export default {
  title: 'Domains/Resource/DownloadRenderer',
  component: DownloadRenderer,
  // Setting mocks to be applied to all stories
  parameters: {
    apolloClient: {
      mocks: [
        graphqlMock1,
        graphqlMock2
      ]
    }
  }
};

export const Default = Template.bind({});
Default.args = {
  resource
};

// ...

// Overriding mocks per-story
export const ExceededCap = Template.bind({});
ExceededCap.args = {
  resource
};

ExceededCap.parameters = {
  apolloClient: {
    mocks: [
      graphqlMock3
    ]
  }
};

yale avatar Mar 26 '21 15:03 yale

@przlada if you're still having issues, there have been similar issues related to MockedProvider not getting access because there are multiple versions of apollo installed, so you might see if that is your issue.

lifeiscontent avatar Mar 28 '21 23:03 lifeiscontent

fwiw, I don't use storyshots, but now trying to figure out a way to expose the stuff you guys need in a way that allows me to move things around without breaking it for you, that decorator is an implementation detail that you shouldn't be importing, I'll follow up with a plan here once I learn more about it.

lifeiscontent avatar Mar 28 '21 23:03 lifeiscontent

It worked :champagne: @yale thank you for your code snippets and help, you saved me from spending the next couple of hours striving to configure these addons to work. That's the true power of an open-source community!

przlada avatar Mar 29 '21 09:03 przlada

@lifeiscontent thanks for the clue, I checked if I don't have multiple versions of apollo installed. :+1: Additionally, @lifeiscontent thank you so much for your work on this Storybook addon. I just started work on a new project and we will be depending on it heavily. Storyshots are also a very useful tool for us, so we are looking forward to your official decorator. Thanks again :smile:

przlada avatar Mar 29 '21 09:03 przlada

@przlada So I talked to some of the storybook maintainers. And I guess storyshots is a bit outdated. They plan on updating it so you don't need to include the decorator but for now it seems like this is an okay approach

lifeiscontent avatar Apr 06 '21 16:04 lifeiscontent

idk when storyshots will be updated, but I'll leave this issue open as a placeholder for when they do. If you would like to be notified when I am able to make these updates please 👍🏻 this comment.

lifeiscontent avatar Apr 27 '21 18:04 lifeiscontent

I have the same issue with @storybook/testing-react. The decorator doesn't get added in tests.

What I did to make it work is supply my own decorator.

import React from 'react';
import * as eva from '@eva-design/eva';
import theme from '../theme';
import { ApplicationProvider } from '@ui-kitten/components';
import { MockedProvider } from '@apollo/client/testing';
import '../src/i18n';

export const parameters = {
  apolloClient: {
    defaultOptions: { watchQuery: { fetchPolicy: 'no-cache' } },
    MockedProvider: ({ children }) => children, // No-op.
  },
  actions: { argTypesRegex: '^on[A-Z].*' },
  options: {
    storySort: {
      order: [
        'Brand book', ['Introduction', 'Logo'],
        // Others.
      ],
    },
  },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  (Story, { parameters: { apolloClient: { MockedProvider: _, ...rest } } }) => (
    <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
      <MockedProvider {...rest}>
        <Story/>
      </MockedProvider>
  </ApplicationProvider>
  )
];

It's definitely not ideal, but at least it works for both storybook (which will have 1 useless wrapper component) as well as storyshots and @storybook/testing-react

RWOverdijk avatar Jun 01 '21 07:06 RWOverdijk