Storyshots support?

[yale]

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]

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,
  ...
];

[przlada]

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:

[yale]

@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
    ]
  }
};

[lifeiscontent]

@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]

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.

[przlada]

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]

@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:

[lifeiscontent]

@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]

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.

[RWOverdijk]

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