Storybook: Storyshots do not work with global decorators

[RusinovAnton]

Issue details

Storyshots do not run addDecorator in config.js. I have global decorator defined in config.js that wraps any story with component that provides context with theme and utils. My stories work fine but storyshots testing fails because of context not being passed into component that requires it.

Steps to reproduce

Use global decorator in config.js that wraps story in context provider component with context that required by components in stories.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/addon-actions: 3.3.15
• @storybook/addon-storyshots: 3.3.15

Affected platforms

• babel-core: 6.26.0
• babel-jest: 22.4.1
• jest: 22.4.2

Screenshots / Screencast / Code Snippets (Optional)

// src/ThemeProvider.jsx

import React from 'react';
import PropTypes from 'prop-types';
import MomentUtils from 'material-ui-pickers/utils/date-fns-utils';
import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider';
import moment from 'moment-timezone';
import { MuiThemeProvider, createMuiTheme } from 'material-ui';

import theme from './theme';

const theme = createMuiTheme(theme);

const ThemeProvider = ({ children }) => (
  <MuiPickersUtilsProvider utils={MomentUtils} moment={moment}>
    <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
  </MuiPickersUtilsProvider>
);

// .storybook/config.js

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { ThemeProvider } from '../src';
import TableComponent from './TableComponent';

// addon-info
setDefaults({
  inline: true,
  source: false,
  TableComponent
});

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

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

const ThemeProviderDecorator = storyFn => (
  <ThemeProvider>{storyFn()}</ThemeProvider>
);

addDecorator(ThemeProviderDecorator);

configure(loadStories, module);

// stories/Datepicker.story.js

import React from 'react';
import { storiesOf } from '@storybook/react';

import { DatePicker } from 'material-ui-pickers';
import { ThemeProvider } from '../src';

const handleDateAction = action('DatePicker onChange');

storiesOf('Components', module)
// Local decorator must be added in order to fix tests
//   .addDecorator(storyFn => <ThemeProvider>{storyFn()}</ThemeProvider>)
  .add(
    'Datepicker',
    () => (
      <DatePicker
        value={Date.now()}
        invalidLabel="Invalid label"
        format="LL"
        animateYearScrolling={false}
        disableFuture
        openToYearSelection
        onChange={this._handleDateChange}
      />
    )
  );



md5-4686f9cdf28e6649344c43205e350efe



console.error node_modules/material-ui-pickers/_shared/WithUtils.js:33
    Utils should be provided

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: Failed prop type: The prop `utils` is marked as required in `DatePickerWrapper`, but its value is `undefined`.



md5-d38228fa748dfd02f0b1aa4e513622f1



    TypeError: Cannot read property 'date' of undefined

      at DatePickerWrapper.PickerBase._this.getValidDateOrCurrent (node_modules/material-ui-pickers/_shared/PickerBase.js:60:23)

Source: https://github.com/dmtrKovalenko/material-ui-pickers/blob/master/lib/src/_shared/PickerBase.jsx#L20

[tmeasday]

Hi @RusinovAnton -- you need to make sure you call addDecorator() before require.context(). This is due to a weirdness in how storyshots implements require.context (#2894). Sorry about the confusion. Thanks for the detailed issue.

[RusinovAnton]

@tmeasday thanks for clarification. It worked for me. Would be nice to have it documented somewhere.

[shwanton]

👍