Jest Snapshot Testing with React Storybook
React Storybook allows for easy snapshot testing integration with Facebook's Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!
[00:00] Now we can do a snapshot of this thing with React Storybook. Let me show you how to do that. First, we will need to have a Storybook-enabled React app. Now I am inside a React Storybook-enabled app. First of all, I'm going to update the React Storybook version.
[00:17] I'm doing it by npm update @kadira/storybook. This will update the React Storybook version to the latest. Now I'm going to add a new package called StoryShots into my app, npm install -d -- it's a devDependency -- @kadira/storyshots.
[00:40] After that, I write a new NPM script called TestStorybook. TestStorybook, and I will set the actual command as storyshots. Now we are good to go. I'm running the actual NPM script. I'm typing npm run teststorybook.
[01:02] This will run the StoryShots command. You can see the new snapshots are stored inside my config directory. These are the actual snapshots. Now let's try to change something inside my component. I'm going to the source directory, and my component.
[01:19] I'm trying to change the background color into red. I'm trying this command again. Now I can see there are two snapshots are different from the existing one. I have two options. Either I can fix this code, or I can accept this other updated snapshot.
[01:39] These are my updated snapshot, and I can simply update my existing snapshot by running this same command with -u option. That will update the snapshot to the latest. After that, I can run the command again. I can see there are no changes.
[02:01] You can commit these snapshot along with the code changes to the repository, and push it to GitHub. After you have done any other UI change, you could simply run this command again, and try to see the changes.
[02:15] You don't need to do anything related to snapshot testing. All you had to do is just create new stories in React Storybook, and StoryShots will take care of everything else.