How to test higher order components?

[ffxsam]

I'm trying to use Storybook to quickly test a package of mine, which is a higher-order component:

storiesOf('Formous', module)
  .addDecorator(story => {
    return <MuiThemeProvider muiTheme={getMuiTheme()}>
      <div style={styles.root}>
        {Formous()(story())}
      </div>
    </MuiThemeProvider>
  })
  .add('normal', () => {
    //console.log(this.props);
   //...

That's not going so well :) Two questions:

1. How do I use Storybook to test higher-order components?
2. How do I access the props passed into the story component by Formous?

[arunoda]

Here story() returns a react element. So, you need to wrap it as a class like this.

const Wrapper = () => (story());
{Formous()(Wrapper)}

[ffxsam]

Great, thanks! I'll give that a try.

[arunoda]

I am closing this now. But feel free to reopen.

[ffxsam]

This is what wound up working for me:

storiesOf('Formous', module)
  .add('basic', () => {
    const Example = ({ fields, formSubmit }) => {
      return <div>
        <form onSubmit={formSubmit(action('form submit'))}>
          <input type="text" { ...fields.name.events } />
          <input type="submit" />
        </form>
      </div>
    };
    const Wrapped = Formous(options)(Example);

    return <Wrapped />
  });