Storybook: info addon and storyshot seem to be incompatible

[vamsiampolu]

I am having trouble getting storyshots to work when using the info addon, when I try and run storyshots, it gives me the error:

yarn test-storybook v0.22.0
$ storyshots
=> Loading custom .babelrc
TypeError: (0 , _storybook.storiesOf)(...).addDecorator(...).addWithInfo is not a function
    at Object.<anonymous> (/Users/localuser/lendi/learning/antd-forms/src/form-schema/stories/ArrayType.story.js:69:4)
    at Module._compile (module.js:571:32)
    at loader (/Users/localuser/lendi/learning/antd-forms/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/localuser/lendi/learning/antd-forms/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at Module.module.constructor.require.original (/Users/localuser/lendi/learning/antd-forms/node_modules/require-middleware/lib/require-middleware.js:32:21)
    at Module.module.constructor.require (/Users/localuser/lendi/learning/antd-forms/node_modules/require-middleware/lib/require-middleware.js:28:69)
error Command failed with exit code 1.

I am using an ejected create-react-app, the .babelrc looks like:

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "transform-class-properties",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

My configuration looks like this:

import {configure, setAddon} from '@kadira/storybook'
import infoAddon from '@kadira/react-storybook-addon-info'

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

setAddon(infoAddon)

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

configure(loadStories, module)

The webpack configuration for storybook looks like this:

// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add addional webpack configurations.
// For more information refer the docs: https://getstorybook.io/docs/configurations/custom-webpack-config

// IMPORTANT
// When you add this file, we won't add the default configurations which is similar
// to "React Create App". This only has babel loader to load JavaScript.

module.exports = {
  plugins: [
    // your custom plugins
  ],
  module: {
    loaders: [
      // add your custom loaders.
      {
        test: /\.svg$/,
        loader: 'svg-sprite'
      },
      {
        test: /\.css$/,
        loader: 'style!css'
      }
    ]
  }
}

Is there a workaround for using these two plugins together.

[vamsiampolu]

I have updated to the new storyshots and have configured the Storyshots.test.js file like this:

import initStoryshots from 'storyshots'
initStoryshots()

I added the matchMedia.js polyfill to config/polyfills.js, I enforced the env of development for the import plugin .babelrc to avoid breaking yarn test when it tries to require js files from the antd module.

I then find that the error is back again:

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "transform-class-properties",
  ],
    "env": {
      "development": {
        "plugins": [
          "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
        ]
      }
    }
}

I have this error again now:

TypeError: (0 , _storybook.storiesOf)(...).addDecorator(...).addWithInfo is not a function

      at Object.<anonymous> (src/form-schema/stories/ArrayType.story.js:69:1)
      at node_modules/storyshots/dist/require_context.js:40:24
      at Array.forEach (native)
      at requireModules (node_modules/storyshots/dist/require_context.js:34:9)
      at node_modules/storyshots/dist/require_context.js:49:7
      at Array.forEach (native)
      at requireModules (node_modules/storyshots/dist/require_context.js:34:9)
      at node_modules/storyshots/dist/require_context.js:49:7
      at Array.forEach (native)
      at requireModules (node_modules/storyshots/dist/require_context.js:34:9)
      at Function.newRequire.context (node_modules/storyshots/dist/require_context.js:92:5)
      at evalmachine.<anonymous>:11:21
      at runWithRequireContext (node_modules/storyshots/dist/require_context.js:104:3)
      at testStorySnapshots (node_modules/storyshots/dist/index.js:72:35)
      at Object.<anonymous> (src/form-schema/Storyshots.test.js:2:52)

How can I get the new storyshots to work with info addon? Is there any workaround or is there any configuration for the issue.

[vamsiampolu]

When reading the source, I found that addWithInfo is syntactic sugar for the add method with an Info component containing the actual story. So I changed my stories to look like:

import {Story as Info} from '@kadira/react-storybook-addon-info'

 storiesOf('MyComponent', module)
   .add('my component is amazing', context => {
          const myCompProps = {a: 'b'}
   const info = `This string can get really long`  
   return (
      <Info
        info={info}
        context={context}
        showInline
        propTables={[MyComponent]}
        styles={s => s}
        <MyComponent {...myCompProps} />
      </Info>
    )
   })

A few things are still giving me trouble though:

The Info component is now unfortunately a part of the snapshot, changes to the documentation will force me to update my snapshots. Also, I am having a bit of trouble introducing custom examples into info because Prism is not defined.

[tmeasday]

Thanks for the report @vamsiampolu.

We should get rid of the addWithInfo API, it is a bit of a historical anomaly.

In terms of your second problem, I agree it's an issue with all decorators. It's something we'd like to solve as part of a new addon API #1212

[shilman]

@tmeasday @vamsiampolu see also #1147

[malixsys]

Adding this to our .storybook/config.js seems to work:

import { setAddon } from '@storybook/react';
import infoAddon from '@storybook/addon-info';
if (process.env.NODE_ENV === 'test') { // for storyshots
    setAddon({
        addWithInfo: function addWithInfo(storyName, info, storyFn) {
            return this.add(storyName, (context) => {
                const renderStory = typeof info === 'function'
                    ? info
                    : storyFn;

                return renderStory(context);

            });
        },
    });
} else {
    setAddon(infoAddon);
}

[ndelangen]

1147 info will be moved into a panel

And we have a solution:
https://github.com/storybooks/storybook/issues/1011#issuecomment-313439490

[MrOrz]

If you use the latest addon-info (>3.2.0) 's withInfo, the workaround can be even simpler:

// storybook.test.js
import initStoryshots from '@storybook/addon-storyshots';

const addonInfo = require('@storybook/addon-info');
addonInfo.withInfo = () => storyFn => storyFn;

initStoryshots();

Looking forward to #1147 !

[ndelangen]

Thank for the additional help @MrOrz

[evenchange4]

FYI, you can use jest to mock the addon-info module directly with new withInfo api:

// package.json
"setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",

// setupTests.js
jest.mock('@storybook/addon-info', () => ({
  withInfo: () => storyFn => storyFn,
  setDefaults: () => {},
}));

// Component.story.js
import { withInfo } from '@storybook/addon-info';
storiesOf('Component', module).add(
  'title',
  withInfo({
    text: 'text',
    inline: true,
  })(() => (
    <Component>
      <div>item 1</div>
    </Component>
  )),
);

example