Turbocharge your React development with Storybook and Percy
tl;dr Percy now has instant integration with Storybook! If you’re already using Storybook, jump in now and get automated UI tests on every commit.
Storybook makes React development easier
When you’re building web apps with React, you’ll quickly find yourself with a whole catalogue of components, from buttons and navigation bars, to entire screens of carefully placed UI widgets. React encourages composition and reusability by design. But even so, it can be daunting to create components that “just work” with every set of props you might throw at them. It can also be difficult and time-consuming to review individual components within the application environment itself.
Storybook solves this problem by letting you preview and develop your components in isolation from the rest of your app. You can show any number of states or “stories” for your component, such as “normal”, “active”, and “disabled” states for a button, and effortlessly switch between them in Storybook. As you continue building your app, Storybook makes it easy to share a living, interactive view of your components with your team.
Storybooks are also a great way of demonstrating and documenting component libraries: for example, Airbnb has published a Storybook showcasing their React-Dates component library.
The recently released Storybook 3.0 has a solid out-of-box experience, and provides a great productivity boost. If you haven’t already, I highly recommend spending 10 minutes with Storybook to see what it can do!
Percy gives Storybook automated UI testing superpowers!
While you’re building a catalogue of UI elements in Storybook, you can easily click between stories and make sure each component is rendering the way you’d expect. This is an essential exercise when preparing to deploy changes or ship a new version of your app. You can manually QA each component, in each state, and even resize the preview window, to get a sense of whether or not your components are ready to go.
Even with Storybook, this can take a lot of time and energy. It relies on you remembering exactly how a component is supposed to look, in every state, at each breakpoint. You have to manually catch any visual changes that have occurred.
That’s where Percy’s new Storybook integration comes in.
When you add Percy to your Storybook, it automatically adds visual testing and review to every story, doing the hard work of visual testing for you. Percy summarizes exactly which pixels have changed allowing you to quickly find visual bugs that have been introduced.
Once you’ve resolved any visual bugs, you can approve the changes to keep a record that the visual review passed, and that all changes introduced were intentional. As a result of your approval, Percy provides a helpful summary of how your components have evolved during this release.
Adding Percy to your Storybook is really easy, with 3 short installation steps in our docs. We even have a 2 minute tutorial, so you can see what it’s like to use Percy and Storybook together, even if you’re brand new to both of them.
Using Storybook and Percy together brings significant improvements to your developer experience when building web apps with React. I invite you to try it out, and let me know of any questions or feedback. I can be reached as @timhaines on Twitter, or tim@percy.io.
Percy is a visual testing platform that gives your team confidence in every visual UI change before it’s shipped. Get started for free at percy.io 🤘
