# Screenshot testing with React and Storybook

DevFeed: [Screenshot testing with React and Storybook](<https://devfeed.tech/articles/screenshot-testing-with-react-and-storybook-24570.md>)

Original publisher: [Read original article](<https://medium.com/bleeding-edge/screenshot-testing-with-react-and-storybook-19ab7e49ec92?source=rss----d8ebe85cdc0f---4>)

Author: Jesse Pinho

Published: 2018-03-19T09:18:02Z

Content type: tutorial

Language: en

Sources: [Bleeding Edge - Medium](<https://devfeed.tech/sources/bleeding-edge-medium.md>)

Topics: [screenshot-testing](<https://devfeed.tech/topics/screenshot-testing.md>), [Storybook](<https://devfeed.tech/topics/storybook.md>), [React](<https://devfeed.tech/topics/react.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [styled-components](<https://devfeed.tech/topics/styled-components.md>), [Selenium](<https://devfeed.tech/topics/selenium.md>)

Tags: [continuous-integration](<https://devfeed.tech/tags/continuous-integration.md>), [react](<https://devfeed.tech/tags/react.md>), [screenshot-testing](<https://devfeed.tech/tags/screenshot-testing.md>), [selenium](<https://devfeed.tech/tags/selenium.md>), [storybook](<https://devfeed.tech/tags/storybook.md>), [styled-components](<https://devfeed.tech/tags/styled-components.md>), [testing](<https://devfeed.tech/tags/testing.md>), [visual-regression-testing](<https://devfeed.tech/tags/visual-regression-testing.md>)

## AI overview

The article explains why end-to-end UI tests can miss visual regressions and explores screenshot testing with React and Storybook to check component appearance across different states.

## Source excerpt

Visual regression testing for fun, profit, and peace of mind Illustration by Marta Pucci A friend of mine recently related a scary story about the lack of automated visual regression testing where he works--a huge international tech firm that you've heard of and probably use. He'd added a CSS class to an element to hide it from the user. Unbeknownst to him, and despite using BEM-style naming for CSS classes, this class name was already being used for an important checkbox in the user settings screen of his company's web app. The result? Users could no longer change the setting represented by the checkbox, because it was invisible! I asked him why that hadn't been caught by automated tests. He explained that, although they did have end-to-end tests in place that went through the UI and tested its functionality, the tests didn't catch the bug. Selenium was still able to check the original checkbox via its selector, so its visibility had no effect on the outcome of the test. The only way this could have been caught is via visual regression testing -- or, as it is sometimes called, screenshot testing. 💅 Switching to styled-components I recalled this story recently while working on a sizable project at Clue: converting all of our "native" CSS to use styled-components. The new helloclue.com website consists of dozens of components. An article page, for example, contains at least ten different React components, all of which have accompanying CSS files. Converting all of this CSS to styled-components means there's an enormous risk of bugs exactly like the one my friend experienced. So before the project began, I investigated setting up screenshot testing for the site. 📕 Enter Storybook (Note: if you're already familiar with Storybook and @storybook/react, feel free to skip to the next section.) We use Storybook when developing simple presentational components. This way, we can test them in every possible state, without having to reproduce all the logic and so forth required t