Prior to 3.4, StoryShots used Jest’s DOM snapshotting capabilities to compute differences between component versions, and automatically notify developers when the render has changed. DOM differencing can catch many regressions, but fails to catch cases where the are purely visual, such as is the case with CSS updates.

In image snapshotting, a rendered image is saved to disk so that visual changes of any kind (including DOM changes and also CSS changes, etc.) get caught when they happen.

To utilize image snapshots with the most simple configuration, call initStoryshots with a custom test:

import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';



initStoryshots({ suite: 'Image storyshots', test: imageSnapshot() });

To learn more and see other configuration modes, see the StoryShots documentation. Image Snapshots are currently supported for all platforms except React Native.

✨ StoryShots for Vue/Angular

The 3.4 release also improves StoryShots with support for Vue and Angular. This work was contributed by Igor Davydkin on his birthday as an incredible present to the Storybook community. 🎁

StoryShots attempts to infer your project type from its dependencies, but you can also specify it manually using the framework option, which can currently take on one of the following values: undefined, 'react', 'react-native', 'vue', 'angular' . For example:



import initStoryshots from ' import path from 'path';import initStoryshots from ' @storybook/addon-storyshots '; initStoryshots({

framework: 'vue',

configPath: path.join(__dirname, '.storybook'),

});

For more information, see the StoryShots documentation.

🌿 Multiple story hierarchies

The Storybook UI has also improved with multiple story hierarchies. This improvement, contributed by Max Meinders, allows you to group stories into visual sections in the UI: