How to enable visual regression testing in react storybook?



How to enable visual regression testing in react storybook?

At the end, there is one add-on called Storyshots which enables visual regression testing for the components rendered in React Storybook. The article will first go into React Storybook and how it can be used for a living component/UI style guide.

What is a visual regression test?

Rather than diffing the rendered DOM elements, a visual regression test will capture a screenshot of your rendered component from the story and diffs this screenshot against another captured screenshot once you run your test again. There are two things to enable the automatic visual regression tests.

How to run screenshot driven visual regression tests on the command line?

Before running again your snapshot tests on the command line in one tab, you need to make sure to run the Storybook script in another command line tab. Afterward, run the snapshot tests and verify the test output. The screenshot driven visual regression tests should work now.

How do I use generateimage in react testing?

We import generateImage from jsdom-screenshot and then render the application with the react-testing-library. Once we do that, we can await the generated image and use the toMatchImageSnapshot assert that we set up to assert that the visuals match.