Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
peisenmann opened this issue Apr 14, 2016 · 10 comments
Closed

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

peisenmann opened this issue Apr 14, 2016 · 10 comments

Comments

@peisenmann
Copy link

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.

@thani-sh
Copy link
Contributor

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
Copy link
Author

@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
Copy link
Member

arunoda commented Apr 14, 2016

Check this as well: #76

@thani-sh
Copy link
Contributor

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
Copy link
Member

arunoda commented Apr 19, 2016

I think we can close this now.

@arunoda arunoda closed this as completed Apr 19, 2016
@faceyspacey
Copy link

faceyspacey commented Sep 27, 2016

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
Copy link

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
Copy link

flieks commented Feb 22, 2017

@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
Copy link

flieks commented Feb 22, 2017

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

ndelangen pushed a commit that referenced this issue Apr 5, 2017
@c-crosby
Copy link

c-crosby commented Dec 10, 2017

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

<div>{story}</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants