Command to check Storybook coverage of components?

[es-lynn]

In my company, we used Storybook as a form of UI testing. In the past, we used to rely primarily on E2E tests such as Cypress & Selenium, but they are 1) tedious to write, 2) breaks easily, and 3) horrible at catching visual bugs.

Instead, now we display all of our pages in Storybook with mocked data, so after each deployment we'll just rapidly click through all of our "PageComponents" to ensure that everything still looks good. We have decoupled all 'pages'/'layouts' from their datasource, so they can all be ran with mocked data without having any external data dependencies. Basically, they are a sort of "PageComponent".

I was wondering if it's possible to have some sort of command to check Coverage for Storybook.

Say I have 4 components, A, B, C & D.

const A = () => (<A><B/></A>
const B = () => <View/>
const C = () => <View/>
const D = () => <View/>

And I have 2 stories:

storiesOf('Example').add('A', ()=><A/>)
storiesOf('Example').add('C', ()=><C/>)

• My test coverage will now mark C & A as covered.
• And since A contains B, B will also be marked as covered.
• However D was not covered in my stories.
• As such my test coverage will be 3/4 or 75%.

Is it possible to have something like this?

[shilman]

Not currently, but here's an open issue for it: #10364

[es-lynn]

Thanks!