Automatically "test" Storybook

Question

We use storybook in our React project. Occasionally, we'll break something in it (usually when we refactor and do something like move a file). Storybook will still deploy properly, but when you open it, you get a big red card for the error.

Is there some command-line method (without going crazy with PhantomJS or something), that we could hook into our pre-push to make sure we haven't broken Storybook (at least at a high level)?

Answer 1

Try this: https://github.com/mthuret/storybook-addon-specifications

In every storybook write simple test in which the storybook is mounted. Automaticall test run after every commit guarantees that storybook сorrectly opens.

Answer 2

Note that a pre-push hook can by bypassed (git push --no-verify)

It is best to centralize the control with a pre-receive hook on the server side. Which means you could setup an intermediate QA repo whose role is to validate the push and, if user acceptance tests are OK, push further to the actual production repo.

You could then write a hook for that QA repo, with TDD-like tests like the ones described in this article, able to test JSX elements.