Snapshot testing for React Styleguidist
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example upgrade eslint Aug 17, 2018
src avoid jest finding snapguidist snapshots (#37) Aug 17, 2018
test upgrade eslint Aug 17, 2018
.babelrc build components Dec 28, 2016
.editorconfig Full refactor (#1) Jan 4, 2017
.eslintrc upgrade eslint Aug 17, 2018
.gitignore support v5 (#15) Jun 18, 2017
.npmrc Full refactor (#1) Jan 4, 2017
.travis.yml enable travis Dec 11, 2016
.yarnrc Full refactor (#1) Jan 4, 2017 add CHANGELOG Aug 17, 2018
LICENSE Initial commit Dec 10, 2016 update README Aug 17, 2018
demo.gif update demo Jan 8, 2017
logo.png add logo to readme (#12) May 1, 2017
package.json v4.0.0 Aug 17, 2018
yarn.lock upgrade eslint Aug 17, 2018

Build Status NPM version tested with jest


Jest Snapshot Testing for React Styleguidist.



Getting Started

To add snapguidist to your react-styleguidist configuration, follow these steps:

  1. install the package using yarn or npm:
yarn add --dev snapguidist
  1. enhance the webpack configuration in styleguide.config.js:
+const snapguidist = require('snapguidist');
-module.exports = {
+module.exports = snapguidist({
  components: 'src/components/**/[A-Z]*.js',
  defaultExample: true,
  webpackConfig: {
    module: {
      rules: [
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          test: /\.css$/,
          loader: 'style-loader!css-loader',

Migrate to v4

In v4, snapshots have been renamed to .sg (as opposed to .snap) to avoid conflicts with Jest, and improve compatibility with create-react-app.

Once upgraded to v4, please run yarn test -u to remove the old snapshots (new ones will be automatically generated on the next run) or the following commands to rename them:

cd .snapguidist/__snapshots/
for old in *.snap; do git mv $old `basename $old .snap`.sg; done


To run the example, install the dependencies and start it:

cd example
yarn install
yarn start


Any contribution to snapguidist is highly appreciated.

Run the following command from the root folder to enable the hot-reload:

yarn build:watch & yarn start


Logo by @SaraVieira