How to visual regression testing of Storybook with addon-knobs?

Question

I'm examining a method for visual regression testing of nearly 1,000 components in a React project. And I'm thinking of using Storybook and BackstopJS to realize it, because many components were already implemented on the Storybook, I thought that I could solve it the fastest.

So then, extracting the Storybook scenario automatically, generated a TOC of iframe.html queries, and giving it to BackstopJS to realize this. This method looked like it worked, but there was a problem.

Most components in this project are stateless, and actions and state changes are clearly separated. Therefore, I used @storybook/addon-knobs to check the state change manually. However, as the issue is mentioned, it appears that knobs do not expect direct manipulation from URL and queries.

I gave up on the snapshot in iframe.html and thought about manipulating knobs from index.html. But the situation where the menu differences on the left pane are frequent and cannot be testing.

Do you have good ideas?

Answer 1

I did self solve.

Changed the knobs and finally pressing the F key with the knobs out of focus .