Storybook: Question: Is it valid to test Redux-Form components?

[peisenmann]

I'm having a little trouble when I try to test a Redux-Form component in the storybook. The error I get is
Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(ReduxForm(SimpleForm))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(ReduxForm(SimpleForm))".

Which I imagine is because there's no <Provider store={store}> wrapping the storybook root. What I first want to check is if this is a valid use case for the story book, and if so, what the suggested best approach would be for getting redux-form to play nice in the storybook.

[mnmtanish]

Please correct me if I'm wrong, but the component we provide when adding stories will be rendered as the root component (source). So I guess it's easy to wrap it with a Provider component when adding stories.

Something like this perhaps

storiesOf('Button', module)
  .add('with a text', withProvider(() => (
    <button onClick={action('clicked')}>My First Button</button>
  )))

[peisenmann]

@mnmtanish Certainly. I was able to do something like

    let store = configureStore();
    return (
      <Provider store={store}>
        <SimpleForm handleSubmit={handleSubmit} />
      </Provider>);

I just wasn't sure if that was idiomatic. Your withProvider function may be something I pickup to shorten the above code, though. Thanks. I think this could be closed unless you'd want to add this the storybook itself as configuration.

[arunoda]

Check this as well: https://github.com/kadirahq/react-storybook/issues/76

[mnmtanish]

Just for reference, with the addDecorator API, we can do something like this:

storiesOf('Button', module)
  .addDecorator(getStory => (<Context>getStory()</Context>))
  .add('with a text', () => (
    <button onClick={action('clicked')}>My First Button</button>
  ))

[arunoda]

I think we can close this now.

[faceyspacey]

also if anyone is having issues with the redux provider not being able to hot load, put it in another file than your config.js file like this:

_config.js:_

import Provider from './Provider';

addDecorator((story) => {
  return <Provider story={story()} />;
});

_Provider.js:_

import React from 'react';
import {Provider as ReduxProvider} from 'react-redux';
import configureStore from '../app/configureStore';

let store = configureStore();

export default function Provider({story}) {
  return (
    <ReduxProvider store={store}>
        {story}
    </ReduxProvider>
  );
};

That way when your config.js file hot reloads it doesn't have to hot reload your redux Provider "on the fly."

[alebrozzo]

I was facing the same problem, and applying what was indicated here kind of fixed it, but I get a different error message now:

React.Children.only expected to receive a single React element child.

I have this in my code:

storiesOf('ActivityLog', module)
    .addDecorator(getStory => (
        <Provider store={store}>
            getStory()
        </Provider>))
    .add('chat', () => (
        <ActivityLog title='The Title' logs={data}></ActivityLog>
    ));

where ActivityLog receives the property logs which is an array, and creates multiple children. But all wrapped with a single div.

[flieks]

@alebrozzo i'm having the exact same issue
Some more error info

Invariant Violation: React.Children.only expected to receive a single React element child.
    at invariant (webpack:///./~/fbjs/lib/invariant.js?:44:15)
    at Object.onlyChild [as only] (webpack:///./~/react/lib/onlyChild.js?:33:169)
    at Provider.render (webpack:///./~/react-redux/lib/components/Provider.js?:51:28)
    at eval (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:796:21)
    at measureLifeCyclePerf (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:795:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:822:32)
    at ReactCompositeComponentWrapper.performInitialMount (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:362:30)
    at ReactCompositeComponentWrapper.mountComponent (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:258:21)
    at Object.mountComponent (webpack:///./~/react-dom/lib/ReactReconciler.js?:46:35)

Seems to be in the Provider.render code

[flieks]

ok i had to switch from the real Povider to the ReduxProvider in the story.

[c-crosby]

for those getting React.Children.only you can wrap your provider output in a div to address the issue

<div>{story}</div>