Storybook: Smoketesting storybook

[hamishtaplin]

Are there any mechanism provided, either at build-time or runtime to check that each story renders without errors? As part of our CI, we build storybook on Travis and then deploy to Github pages—if a story breaks somehow (easily done) then we end up deploying a broken storybook application.

Currently, we are running the storybook app on Travis and then using webdriver.io (Selenium) to navigate to each story and check for errors. However, due to the way storybook renders the menu, it's really hard to parse for "links" (there are none, just divs) to stories when using "nested" stories.

The closest thing I can see is using storyshots to render each story—is there anything else?

[Hypnosphi]

There is a --smoke-test option for start-storybook in 3.3.0-alpha, but looks like it doesn't serve your needs: it just checks that compilation is successful

I'll look into how menu items are rendered and probably will add some data attributes

[hamishtaplin]

@Hypnosphi Awesome, that would be really helpful 👍

[Hypnosphi]

By the way, you can obtain the stories tree in runtime:

import {getStorybook} from '@storybook/react';

const stories = getStorybook();

And then form the links using ?selectedKind=<kind>&selectedStory=<story> pattern

[Hypnosphi]

add some data attributes

In fact they are already present, it's data-name

[ndelangen]

@hamishtaplin I wonder what in storyshots made you look for something else.

Storyshots will assure you all stories render exactly as before. If anything changes, it will fail.
Sounds like that's what you wanted?

[tmeasday]

You can use storyshots to do exactly this, with the renderOnly test body.