Snapshot testing for React Styleguidist




Jest Snapshot Testing for React Styleguidist.
!Demo
To add snapguidist to your react-styleguidist configuration, follow these steps:
1. install the package using yarn or npm:
``bash`
yarn add --dev snapguidist
2. enhance the webpack configuration in styleguide.config.js:
`diff`
+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',
},
],
},
},
-};
+});
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:shbasename $old .snap
cd .snapguidist/__snapshots/
for old in *.snap; do git mv $old .sg; done`
To run the example, install the dependencies and start it:
`bash`
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:
`bash``
yarn build:watch & yarn start
Logo by @SaraVieira