Test functional component using a hook

[revmischa]

function ModelTable() {
  const pagedTable = usePagedTable<IModel>({
    apiCall: fakeAPICall,
  })

  return <PagedTable {...pagedTable.renderProps} renderRow={renderRow} />
}

storiesOf('PagedTable', module)
  .addDecorator(withPropsTable)
  .add('Table', () => {
    return (
      <div style={{ width: 500 }}>
        <ModelTable />
      </div>
    )
  })

I want it to show me props for PagedTable but instead it says
Prop Types
“ModelTable” Component
No propTypes defined!

[hipstersmoothie]

This is a limitation of how we determine what components are in a story. Here is the code. You can see that we do a DFS search through the JSX returned by the story. I basically just walks all .children. If you wrap you real components in a test wrapper we no longer have access to what components you are using, as we cannot walk the story's .children.

But with storybook 5.2 you can use hooks right in your story. So you can do something like:

storiesOf("PagedTable", module)
  .addDecorator(withPropsTable)
  .add("Table", () => {
    const pagedTable = usePagedTable<IModel>({
      apiCall: fakeAPICall
    });

    return (
      <div style={{ width: 500 }}>
        <PagedTable {...pagedTable.renderProps} renderRow={renderRow} />
      </div>
    );
  });