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

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.

[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.”

[c-crosby]

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

<div>{story}</div>