Breaks Storyshots

[JakeHartnell]

First, thanks for a very useful addon. I followed the setup instructions and it works great, aside from causing storyshots to not work. This happens when I don't change any code, simply:

1. Update snapshots with npm test -- -u
2. Run npm test

All of the storyshots produce the following error:

  ● Storyshots › UserAvatar › Basic usage

    expect(received).toMatchSnapshot()

    Snapshot name: `Storyshots UserAvatar Basic usage 1`

    - Snapshot
    + Received

    @@ -1564,11 +1564,11 @@
                  "storybookjs/knobs/reset": Array [
                    [Function],
                  ],
                },
                "isAsync": false,
    -           "sender": "55d25aacab5c3",
    +           "sender": "ac344bc91d551",
                "transport": Object {
                  "send": [Function],
                  "setHandler": [Function],
                },
              },

The only way to fix it (that I've found so far) is to disable storybook-addon-material-ui.

My addons:

import '@storybook/addon-storysource/register';
import '@storybook/addon-notes/register';
import '@storybook/addon-knobs/register';
import 'storybook-readme/register';
import '@storybook/addon-a11y/register';
import 'storybook-addon-material-ui/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-backgrounds/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import 'storybook-addon-specifications/register';

My config:

import { addDecorator, configure } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { addReadme } from 'storybook-readme';
import { withKnobs } from '@storybook/addon-knobs';
import { setDefaults } from 'react-storybook-addon-props-combinations';
import { muiTheme } from 'storybook-addon-material-ui';
import '@storybook/addon-console';

import customInputTheme from '../customMuiTheme';

addDecorator(withA11y);
addDecorator(addReadme);
addDecorator(withKnobs);
addDecorator(muiTheme([customInputTheme]));

// Set global defaults for prop combinations here
// https://github.com/evgenykochetkov/react-storybook-addon-props-combinations
setDefaults({});

function loadStories() {
    const req = require.context('../src', true, /\.stories\.tsx$/);
    req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

Anyone else run into this issue?

[hgulino]

I came across this issue and decided to drop the use of the addon altogether since I'm comfortable creating my own Storybook Addon Decorators. By removing the storybook-addon-material-ui and adding the following, I was able to mimic the necessary styles for my project.

My config:

import React from 'react';
import { CssBaseline } from '@material-ui/core';
import { MuiThemeProvider } from '@material-ui/core/styles';
import MuiTheme from '../app/theme';
import { configure, addParameters, addDecorator } from '@storybook/react';

const MuiDecorator = storyFn => (
  <MuiThemeProvider theme={MuiTheme}>
    <CssBaseline />
    {storyFn()}
  </MuiThemeProvider>
);
addDecorator(MuiDecorator);

const req = require.context('../app', true, /\.stories\.(js)$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);