Storybook: Global addDecorator not loaded

[creaux]

I see you already trying to solve this issue here #879 but I experiencing maybe the same. I haven't digged into deeply but following code making issue.

import withThemes from './decorators/withThemes';
...
const spread = require.context('../app', true, /stories.jsx?$/);
...
addDecorator(withThemes);
...
function loadStories() {
  spread.keys().forEach(filename => spread(filename));
}

configure(loadStories, module);

Error is following...

[withTheme] Please use ThemeProvider to be able to use withTheme

      at WithTheme.componentWillMount (node_modules/styled-components/lib/hoc/withTheme.js:63:15)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:348:23
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at ReactCompositeComponent.performInitialMount (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:347:9)
      at ReactCompositeComponent.mountComponent (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:258:21)
      at Object.ReactReconciler.mountComponent (node_modules/react-test-renderer/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponent.performInitialMount (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponent.mountComponent (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:258:21)
      at Object.ReactReconciler.mountComponent (node_modules/react-test-renderer/lib/ReactReconciler.js:46:35)
      at mountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:55:31)
      at ReactTestReconcileTransaction.TransactionImpl.perform (node_modules/react-test-renderer/lib/Transaction.js:140:20)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)
      at ReactDefaultBatchingStrategyTransaction.TransactionImpl.perform (node_modules/react-test-renderer/lib/Transaction.js:140:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactUpdates.js:97:27)
      at Object.ReactTestMount.render [as create] (node_modules/react-test-renderer/lib/ReactTestMount.js:125:18)
      at Object.test (node_modules/@storybook/addon-storyshots/dist/test-bodies.js:26:44)
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/index.js:141:21)
      at process._tickCallback (internal/process/next_tick.js:103:7)

I'm using styled-components which expecting that I will use with HOC from this is quiet straightforward that hoc is not able to gather context data properly.

[UsulPro]

@creaux did you try to put addDecorator inside loadStories() as a workaround:

function loadStories() {
  addDecorator(withThemes);
  spread.keys().forEach(filename => spread(filename));
}

[creaux]

it didn't help.

I'm awaring it has something to have with that I'm here making this element transformation. This is render method.

const themeProvider = theme => Component => props => (
  <ThemeProvider theme={theme}>
    <Component {...props} />
  </ThemeProvider>
);
...
this.provideTheme = themeProvider(someTheme);
...
// Not sure whether this can make that issue?
return React.createElement(this.provideTheme(() => children));

[creaux]

Okay I did directly this in decorator and it didn't helped.

return <ThemeProvider theme={this.theme}>{children}</ThemeProvider>;

So seems to be really somewhere else.

[creaux]

When I'm using addDecorator per each story it works!

storiesOf('Component')
  .addDecorator(themeProvider(theme))
  .add('story', () => (
    <Component {...props1} />
  ));

Any thoughts?

[UsulPro]

@creaux I tried to reproduce with @storybook/react v3.2.8 such a simple global decorator:

addDecorator(storyFn => <div style={{border: 'solid 10px navy'}} children={storyFn()} />);

and it works fine for me.
What version of Storybook do you use at this moment?
Could you try to add this line into your config.js and check it out? Please, make sure that you manually update the page after each change since HMR doesn't do it for a config files.

[creaux]

Hello @UsulPro, thanks for reply. I have updated regarding issue which is at the moment permanent.

Global decorator is not loaded only for JEST storyshots. I overwalked this issue by local decorator which is passthrough as empty function for storybook (as global decorator is working) but local is only loaded for storyshots in JEST environment.

storiesOf('Component')
  // For storybook passthrough function returning getStory()
  // For jest HOC containing ThemeProvider encapsulation
  .addDecorator(themeProvider(theme)))
  .add('story', () => (
    <Component {...props} />
  ))

Global provider still used but changed as I was bit unclear about element vs. component and how storybook handling it (that was reason of previous issue). Now it is clear and usage is following.

class WithTheme extends Component {
   ...
   render() {
       ...
       return <ThemeProvider theme={this.theme}>{children}</ThemeProvider>;
  }
}

Version of storybook 3.1.8

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!