Storybook: Global decorators don't work in storyshots when applied in config file

[shilman]

Issue by chrbala
_Thursday Dec 01, 2016 at 07:09 GMT_
_Originally opened as https://github.com/storybooks/storyshots/issues/59_

---

I am using addDecorator for a few context-providing components. It works when I apply them via storiesOf(...).addDecorator, or globally in a story.

However, global decorators seem to be ignored entirely when applied in the config file.

I am using [email protected] and [email protected].

[wuzhuzhu]

+1

[tmeasday]

I tried to reproduce this and failed: https://github.com/tmeasday/storybook/tree/issue-877

Here's what I did:

git clone https://github.com/storybooks/storybook
cd storybook
npm install
npm run bootstrap
cd examples/test-cra
npm install

# ensure that the tests pass
CI=true npm test

# change the `src/stories/index.js` file to add a global decorator, cf https://github.com/tmeasday/storybook/commit/03f98117b38e59efe0aa8dc3b181b2ed61fe27d5

# re-ran the test, noticed the snapshot fail w/ expected decorator diffs
CI=true npm test

@chrbala / @wuzhuzhu maybe you can fork my branch above and tweak it to reproduce the problem?

[frenic]

@tmeasday I've got a similar issue using Styletron.

import React from 'react';
import {addDecorator} from '@storybook/react';
import Styletron from 'styletron-client';
import {StyletronProvider} from 'styletron-react';

const styletron = new Styletron();

addDecorator(story => (
  <StyletronProvider styletron={styletron}>{story()}</StyletronProvider>
));

Everything works fine at first load. But when I change something with HMR it looses context on update and I get "injectDeclaration" is not a function of undefined. With a simple console.log I noticed that the decorator doesn't invoke on HMR update. Maybe that has something to do with it?

[tmeasday]

Hi @faddee -- this sounds like maybe a different issue (this particular problem has to do with storyshots, so HMR wouldn't have been involved).

Can you maybe open a new issue and if you are able to a reproduction of the bug with Styletron would be amazing!

[frenic]

@tmeasday Oh, missed the snapshot part. Thanks for clearing that up.

[ktj]

I've added an example to https://github.com/storybooks/storybook/issues/879

[ntucker]

This change breaks HMR for me. I never had a problem with decorators in the past. Anyone have some tips on how to change my config? I just add decorators then load the stories, which is how the docs say to do things...

addDecorator(marketStatusDecorator)

function loadStories() {
  const req = require.context('../js', true, /\.stories\.js$/)
  req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module)

[duro]

I am implementing a decorator exactly as @ntucker describes and using Storyshots. I have one test that sets's up Storyshot, and it looks like this:

src/components/__tests__/Storyshots.test.js:

import initStoryshots from '@storybook/addon-storyshots'

initStoryshots()

That's it. The rest of my config is all contained in .storybook/config.js, which looks like this:

import { configure, addDecorator } from '@storybook/react'

import Decorator from './decorator'

const req = require.context('../src/components', true, /story.js$/)

addDecorator(Decorator)

const loadStories = () => {
  require('./Welcome/story')
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

I get the error: Global decorators added after loading stories will not be applied and it seems HMR is not working quite right.

[UsulPro]

Looks like we need to reopen it or create a new one issue?