snapguidist v4.0.0

Jest Snapshot Testing for React Styleguidist.

Demo

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

2. 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

Example

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

cd example
yarn install
yarn start

Development

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

Credits

Logo by @SaraVieira