• Stars
    star
    288
  • Rank 143,818 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Snapshot testing for React Styleguidist

Build Status NPM version tested with jest

Preview

Jest Snapshot Testing for React Styleguidist.

Demo

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

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